@layer reset, tokens, base, components, pages, utilities; @layer reset{ /* ================================================ ๐Ÿงผ Polish / Normalization ================================================ */ *,*::before,*::after{box-sizing:border-box} img,svg,video{display:block;max-width:100%;height:auto} html{scroll-padding-top:var(--anchor-scroll-offset)} [id]{scroll-margin-top:var(--anchor-scroll-offset)} /* Focus rings for button-like elements */ :where(button,[role="button"],.button-link,.event-info-calendarbutton,.homepage-button,.expand-btn,.lb-close,.lb-prev,.lb-next,.header-toggle,.slide-nav a):focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} /* Disable hover jiggle on touch */ @media (pointer:coarse){.homepage-button:hover,.button-link:hover,.travel-card:hover,.travel-info-grid .travel-card-link:hover .travel-card,.registry-card:hover,.gallery-item:hover{transform:none !important}} /* Lightbox scroll containment */ #lightbox{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* safety for hidden UI */ [hidden]{display:none!important} } @layer tokens{ :root{ --font-display:"Presto","Garamond",Georgia,"Times New Roman",serif; --font-body:"Garamond","Garamond Premier Pro","EB Garamond",Georgia,serif; --font-body-i:"GaramondItalic","Garamond","Garamond Premier Pro",Georgia,serif; --font-numeric: tabular-nums lining-nums; --anchor-scroll-offset:6rem; --weight-regular:400; --weight-medium:500; --weight-bold:700; --step-0:clamp(.82rem,.78rem + .26vw,.90rem); --step-1:clamp(.94rem,.88rem + .30vw,1.05rem); --step-2:clamp(1.00rem,.96rem + .45vw,1.13rem); --step-3:clamp(1.25rem,1.16rem + .60vw,1.50rem); --step-4:clamp(1.56rem,1.40rem + .80vw,1.88rem); --step-5:clamp(1.95rem,1.72rem + 1.05vw,2.35rem); --step-6:clamp(2.44rem,2.06rem + 1.50vw,2.95rem); --type-kicker-fs:var(--step-1); --type-body-fs:var(--step-2); --type-body-sm-fs:var(--step-1); --type-card-title-fs:clamp(1.45rem,1.2rem + .7vw,1.95rem); --type-section-title-fs:clamp(1.7rem,1.35rem + .9vw,2.35rem); --type-hero-title-fs:clamp(2rem,1.55rem + 1.75vw,3.2rem); --lh-tight:1.2; --lh-normal:1.55; --lh-comfy:1.7; --ls-tight:.01em; --ls-subtle:.2px; --ls-slight:.3px; --space-3xs:clamp(.125rem,.10rem + .20vw,.375rem); --space-2xs:clamp(.25rem,.20rem + .30vw,.50rem); --space-xs: clamp(.50rem,.40rem + .40vw,.75rem); --space-sm: clamp(.75rem,.60rem + .50vw,1.00rem); --space-md: clamp(1.00rem,.80rem + .80vw,1.50rem); --space-lg: clamp(1.50rem,1.00rem + 1.40vw,2.25rem); --space-xl: clamp(2.00rem,1.20rem + 2.20vw,3.00rem); --space-2xl:clamp(3.00rem,1.80rem + 3.80vw,4.50rem); --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-pill:9999px; --shadow-sm:0 1px 3px rgba(0,0,0,.10); --shadow-md:0 2px 8px rgba(0,0,0,.12); --shadow-lg:0 4px 16px rgba(0,0,0,.15); --z-borders:0; --z-base:1; --z-nav:10; --z-dropdown:20; --z-modal:40; --z-lightbox:50; --z-loading:60; --z-portal:70; --z-scrim:71; --z-mnav:80; --z-photo-gate: 100; --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-emphasis:cubic-bezier(.16,1,.3,1); --dur-fast:150ms; --dur-mid:250ms; --dur-slow:400ms; --transition-fade: opacity var(--dur-mid) var(--ease-standard), visibility var(--dur-mid) var(--ease-standard); --transition-elevate: box-shadow var(--dur-mid) var(--ease-standard), transform var(--dur-mid) var(--ease-standard); --transition-color: color var(--dur-mid) var(--ease-standard), background-color var(--dur-mid) var(--ease-standard), border-color var(--dur-mid) var(--ease-standard); --container-sm:40rem; --container-md:50rem; --container-lg:75rem; --inline-sm:min(92%, var(--container-sm)); --inline-md:min(92%, var(--container-md)); --inline-lg:min(92%, var(--container-lg)); /* SEMANTIC COLORS */ --color-bg:#fffaf6; --color-surface:#fff; --color-surface-muted:#f8f2eb; --color-divider:#0001; --color-accent:#d6a89e; --color-action:#b6c49a; --color-action-hover:#9fb589; --color-text:#3e3423; --color-text-muted:#7a6a58; --color-text-subtle:#948577; --color-success:#3e5b36; --color-error:#8a1f1f; --bg-success:#f1f8ec; --bg-error:#fff3f3; --border-muted:#e8dcd0; --border-error:#f0b6b6; --overlay-weak:#0008; --overlay-strong:#0a0806e6; --overlay-inverse:#ffffff1f; /* On-color pairings */ --on-surface: var(--color-text); --on-muted-surface: var(--color-text); --on-accent:#fff; --on-action:#fff; --on-error:#fff; --on-success:#fff; /* Focus */ --focus-ring: 0 0 0 .12rem color-mix(in oklab, var(--color-accent), transparent 70%); --focus-border-color: var(--color-accent); /* Opacity scale */ --opacity-zero: 0; --opacity-half: .5; --opacity-semi: .72; --opacity-full: 1; /* Hover motion tokens */ --hover-move: translateY(-1px); --hover-scale: scale(1.01); /* Measures */ --measure-default: 65ch; /* Sizes for icons/avatars */ --size-2xs:1.75rem; --size-xs:2.5rem; --size-sm:3rem; --size-md:4rem; --size-lg:5rem; --size-xl:6rem; --icon-size:var(--size-md); --avatar-sm:var(--size-sm); --avatar-md:var(--size-md); --avatar-lg:var(--size-lg); --icon-radius:var(--radius-pill); --icon-bg:var(--color-surface-muted); --icon-shadow:var(--shadow-md); } } @layer base{ /* ================================================ ๐Ÿ“ Global Resets & Base ================================================ */ html, body{min-block-size:100%;margin:0;padding:0} body{position:relative; overflow-x: clip; display:flex;flex-direction:column;font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);font-size:var(--type-body-fs);line-height:var(--lh-comfy)} main{flex-grow:1} .skip-link{position:absolute;top:var(--space-sm);left:var(--space-sm);z-index:calc(var(--z-mnav) + 1);padding:.65rem .95rem;border-radius:var(--radius-pill);background:var(--color-text);color:#fff;text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-180%);transition:transform var(--dur-mid) var(--ease-standard),box-shadow var(--dur-mid) var(--ease-standard)} .skip-link:focus{transform:translateY(0);box-shadow:var(--focus-ring),var(--shadow-lg)} .skip-link:hover{color:#fff} @font-face{font-family:"Presto";src:url("../fonts/english-111-presto-bt.ttf") format("truetype");font-display:swap;size-adjust:103%} @font-face{font-family:"Garamond";src:url("../fonts/EBGaramond-VariableFont_wght.ttf") format("truetype");font-display:swap;size-adjust:100%} @font-face{font-family:"GaramondItalic";src:url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');font-style:italic;font-display:swap;size-adjust:100%} } @layer components{ /* =========================== Decorative Page Borders =========================== */ :root{--border-w:20%;--border-opacity:.52;--border-offset-x:-12rem;--border-offset-top:clamp(7.75rem,10vw,9.75rem);--border-offset-bottom:clamp(3rem,5vw,4.75rem);--border-mask-fade:clamp(1.35rem,2.6vw,2.8rem);--border-shadow:0 .35rem 1rem rgba(111,86,60,.10)} .page-borders{position:absolute;inset:0;display:none;pointer-events:none;z-index:var(--z-borders);overflow:clip} .page-border{position:absolute;top:var(--border-offset-top);inline-size:var(--border-w);block-size:auto;max-block-size:calc(100% - var(--border-offset-top) - var(--border-offset-bottom));opacity:var(--border-opacity);object-fit:contain;object-position:top center;filter:drop-shadow(var(--border-shadow));-webkit-mask-image:linear-gradient(180deg,transparent 0,var(--color-text) var(--border-mask-fade),var(--color-text) calc(100% - var(--border-mask-fade)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,var(--color-text) var(--border-mask-fade),var(--color-text) calc(100% - var(--border-mask-fade)),transparent 100%)} .page-border.border-left{left:var(--border-offset-x)} .page-border.border-right{right:var(--border-offset-x)} @media (min-width:56.25em){.page-borders{display:block}} @media (max-width:72em){:root{--border-w:20%;--border-opacity:.4;--border-offset-x:-12rem;--border-offset-top:clamp(7.25rem,11vw,8.5rem);--border-offset-bottom:clamp(2.25rem,4vw,3.5rem)}} @media (max-width:37.5em){.page-borders{display:none}} @media (prefers-reduced-motion:reduce){.page-border{transform:none!important;will-change:auto}} /* ================================================ ๐Ÿ“„ Rules / Links ================================================ */ :root{--rule-thin:1px;--rule-thick:2px;--rule-style:dashed;--rule-color:color-mix(in oklab,var(--border-muted),transparent 25%);--link-color:var(--color-accent);--link-hover:var(--color-accent);--link-visited:color-mix(in oklab,var(--color-accent),black 6%);--link-underline-offset:.08em;--link-underline-thickness:2px;--link-underline-width:95%} a:not(.button){font-family:var(--font-body);color:var(--link-color);text-decoration-thickness:var(--link-underline-thickness);text-underline-offset:var(--link-underline-offset);text-decoration-color:color-mix(in oklab,currentColor,transparent 50%);transition:var(--transition-color);-webkit-tap-highlight-color:transparent;text-decoration-skip-ink:auto} a:not(.button):hover{color:var(--link-hover,var(--color-accent));text-decoration-color:currentColor;text-decoration-thickness:var(--link-underline-thickness,2px)} a:not(.button):active{color:var(--link-hover)} a:not(.button):visited{color:var(--link-visited)} a:not(.button):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:.15rem} .link-underline{text-decoration:none;background:linear-gradient(currentColor,currentColor)0 100%/var(--link-underline-width)var(--link-underline-thickness)no-repeat;transition:var(--transition-color),background-size var(--dur-mid)var(--ease-standard)} .link-underline:hover{color:var(--link-hover);background-size:100% var(--link-underline-thickness)} /* ================================================ ๐Ÿ“„ Fields / Inputs ================================================ */ :root{--field-ff:var(--font-body);--field-fs:var(--step-2);--field-pad-y:var(--space-2xs);--field-pad-x:var(--space-sm);--field-bg:var(--color-surface);--field-color:var(--color-text);--field-border:1px solid var(--border-muted);--field-radius:var(--radius-md);--field-placeholder-color:var(--color-text-muted);--field-placeholder-opacity:1;--field-hover-bg:color-mix(in oklab,var(--field-bg),black 2%);--field-focus-border:var(--focus-border-color,var(--color-accent));--field-focus-ring:var(--focus-ring);--field-disabled-bg:var(--bg-disabled,color-mix(in oklab,var(--color-surface),black 3%));--field-disabled-color:var(--color-disabled,color-mix(in oklab,var(--color-text),transparent 60%));--field-error-border:var(--border-error);--field-error-bg:var(--bg-error);--field-success-bg:var(--bg-success)} :where(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="url"],input[type="password"],textarea,select,.input){font-family:var(--field-ff);font-size:var(--field-fs);color:var(--field-color);background:var(--field-bg);border:var(--field-border);border-radius:var(--field-radius);padding:var(--field-pad-y) var(--field-pad-x);width:100%;line-height:var(--lh-normal);transition:var(--transition-color),var(--transition-elevate),var(--transition-fade),border-color var(--dur-mid) var(--ease-standard);box-shadow:none} @media (hover:hover){:where(input,textarea,select,.input):hover{background:var(--field-hover-bg)}} :where(input,textarea,.input)::placeholder{color:var(--field-placeholder-color);opacity:var(--field-placeholder-opacity)} :where(input,textarea,select,.input):focus{outline:none;border-color:var(--field-focus-border);box-shadow:var(--field-focus-ring)} :where(input,textarea,select,.input):disabled,:where(input,textarea,select,.input)[aria-disabled="true"]{background:var(--field-disabled-bg);color:var(--field-disabled-color);cursor:not-allowed} textarea{resize:vertical;min-height:calc(1.8em + 2 * var(--field-pad-y));overflow:auto} select{appearance:none;background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .75em center;background-size:1em auto;padding-right:calc(var(--field-pad-x) + 1.75em)} .is-invalid{border-color:var(--field-error-border)!important;background:var(--field-error-bg)} .is-valid{background:var(--field-success-bg)} .form-help{font-size:var(--step-1);color:var(--color-text-muted);margin-block-start:.35rem} .form-label{display:inline-block;font-weight:var(--weight-bold);margin-block-end:.25rem;letter-spacing:var(--ls-subtle)} .guest-row{display:grid;grid-template-columns:1.2fr .8fr 1.2fr auto;gap:var(--space-2xs);align-items:center;margin-block:var(--space-2xs)} .guest-row .remove-guest-button{inline-size:2.25rem;block-size:2.25rem;display:inline-grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--border-muted);background:var(--color-surface);transition:var(--transition-elevate),var(--transition-color)} @media (hover:hover){.guest-row .remove-guest-button:hover{transform:var(--hover-move);box-shadow:var(--shadow-sm);color:var(--color-error);border-color:var(--border-error)}} .guest-row .remove-guest-button:focus-visible{outline:none;box-shadow:var(--focus-ring)} @container (inline-size < 36rem){.guest-row{grid-template-columns:1fr 1fr}.guest-row input[type="email"]{grid-column:1 / -2}} input:-webkit-autofill{-webkit-text-fill-color:var(--field-color);box-shadow:0 0 0 1000px var(--field-bg) inset} /* ================================================ ๐Ÿ“„ Buttons ================================================ */ :root{--btn-h-sm:2.25rem;--btn-h-md:2.6rem;--btn-h-lg:2.9rem;--btn-fs:var(--step-2);--btn-pad-y:.58rem;--btn-pad-x:1rem;--btn-radius:var(--radius-pill);--btn-shadow:0 .55rem 1.1rem rgba(62,52,35,.10),inset 0 1px 0 rgba(255,255,255,.68);--btn-shadow-hover:0 .8rem 1.45rem rgba(62,52,35,.14),inset 0 1px 0 rgba(255,255,255,.72);--btn-primary-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-action),white 8%),color-mix(in oklab,var(--color-action),black 4%));--btn-primary-bg-hover:linear-gradient(180deg,color-mix(in oklab,var(--color-action-hover),white 6%),color-mix(in oklab,var(--color-action-hover),black 6%));--btn-primary-color:var(--on-action);--btn-primary-border:1px solid color-mix(in oklab,var(--color-action),black 14%);--btn-primary-shadow:0 .8rem 1.5rem rgba(159,181,137,.26),inset 0 1px 0 rgba(255,255,255,.36);--btn-primary-shadow-hover:0 .95rem 1.7rem rgba(159,181,137,.30),inset 0 1px 0 rgba(255,255,255,.32);--btn-ghost-bg:rgba(255,255,255,.78);--btn-ghost-bg-hover:color-mix(in oklab,var(--color-surface),var(--color-accent) 14%);--btn-ghost-color:var(--color-text);--btn-ghost-border:1px solid color-mix(in oklab,var(--border-muted),var(--color-accent) 26%);--btn-danger-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-error),white 8%),color-mix(in oklab,var(--color-error),black 2%));--btn-danger-bg-hover:linear-gradient(180deg,color-mix(in oklab,var(--color-error),white 4%),color-mix(in oklab,var(--color-error),black 10%));--btn-danger-color:var(--on-error);--btn-danger-shadow:0 .75rem 1.35rem rgba(138,31,31,.18),inset 0 1px 0 rgba(255,255,255,.26);--btn-danger-shadow-hover:0 .95rem 1.6rem rgba(138,31,31,.22),inset 0 1px 0 rgba(255,255,255,.22)} .button{font:inherit;font-weight:var(--weight-bold);font-size:var(--btn-fs);letter-spacing:.01em;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-radius);min-block-size:var(--btn-h-md);display:inline-flex;align-items:center;justify-content:center;gap:.45em;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:var(--transition-elevate),var(--transition-color),transform var(--dur-fast) var(--ease-standard);box-shadow:var(--btn-shadow);line-height:var(--lh-tight);backdrop-filter:saturate(118%)} .button:hover{transform:var(--hover-move);box-shadow:var(--btn-shadow-hover)} .button:active{transform:none} .button:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-shadow)} .button--sm{min-block-size:var(--btn-h-sm)} .button--lg{min-block-size:var(--btn-h-lg)} .button--block{inline-size:100%} .button--primary{background:var(--btn-primary-bg);color:var(--btn-primary-color);border:var(--btn-primary-border);box-shadow:var(--btn-primary-shadow)} .button--primary:hover{background:var(--btn-primary-bg-hover);box-shadow:var(--btn-primary-shadow-hover)} .button--primary:focus-visible,.button--menu[aria-expanded="true"]:focus-visible{box-shadow:var(--focus-ring),var(--btn-primary-shadow)} .button--ghost{background:var(--btn-ghost-bg);color:var(--btn-ghost-color);border:var(--btn-ghost-border)} .button--ghost:hover{background:var(--btn-ghost-bg-hover);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 42%);color:var(--color-text);box-shadow:var(--btn-shadow-hover)} .button--danger{background:var(--btn-danger-bg);color:var(--btn-danger-color);border:1px solid color-mix(in oklab,var(--color-error),black 12%);box-shadow:var(--btn-danger-shadow)} .button--danger:hover{background:var(--btn-danger-bg-hover);box-shadow:var(--btn-danger-shadow-hover)} .button--danger:focus-visible{box-shadow:var(--focus-ring),var(--btn-danger-shadow)} .button--icon{inline-size:2.25rem;min-block-size:2.25rem;padding:0;border-radius:var(--radius-pill)} .button--menu::after{content:"โ–พ";margin-inline-start:.5rem;line-height:var(--lh-tight)} .button--menu[aria-expanded="true"]::after{content:"โ–ด"} .button--menu[aria-expanded="true"]{background:var(--btn-primary-bg-hover);box-shadow:var(--btn-primary-shadow)} .button.is-loading{opacity:.6;pointer-events:none} .button:disabled{opacity:.6;cursor:not-allowed;transform:none} .button.is-solved{background:var(--btn-primary-bg);color:var(--btn-primary-color);border:var(--btn-primary-border);box-shadow:var(--btn-primary-shadow)} .button.is-solved:disabled{opacity:1;cursor:default} .button.is-failed{background:color-mix(in oklab,var(--bg-error),white 12%);color:var(--color-text);border:1px solid var(--border-error);box-shadow:var(--shadow-sm)} .button.is-failed:disabled{opacity:1;cursor:default} /* ================================================ ๐Ÿ“„ Chips ================================================ */ :root{--chip-fs:var(--step-1);--chip-pad-y:.42rem;--chip-pad-x:.85rem;--chip-radius:var(--radius-pill);--chip-shadow:0 .35rem .85rem rgba(62,52,35,.06),inset 0 1px 0 rgba(255,255,255,.72);--chip-filled-bg:rgba(255,255,255,.82);--chip-filled-color:var(--on-surface);--chip-outline-border:1px solid color-mix(in oklab,var(--border-muted),var(--color-accent) 22%);--chip-outline-bg:rgba(255,255,255,.58)} .chip{font-size:var(--chip-fs);font-weight:var(--weight-bold);letter-spacing:.01em;padding:var(--chip-pad-y) var(--chip-pad-x);border-radius:var(--chip-radius);box-shadow:var(--chip-shadow);display:inline-flex;align-items:center;gap:.4em;backdrop-filter:saturate(116%)} .chip--filled{background:var(--chip-filled-bg);color:var(--chip-filled-color)} .chip--outline{background:var(--chip-outline-bg);border:var(--chip-outline-border);color:var(--on-surface)} /* ================================================ ๐Ÿ“„ Cards / Details Tables ================================================ */ :root{--card-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,242,235,.93));--card-bg-muted:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,242,235,.90));--card-border:1px solid color-mix(in oklab,var(--border-muted),white 12%);--card-radius:clamp(.85rem,.75rem + .22vw,1.05rem);--card-shadow:0 .95rem 2rem rgba(62,52,35,.08),0 .1rem .35rem rgba(62,52,35,.04);--card-shadow-hover:0 1.2rem 2.4rem rgba(62,52,35,.12),0 .2rem .4rem rgba(62,52,35,.05);--card-sheen:inset 0 1px 0 rgba(255,255,255,.76);--card-border-strong:color-mix(in oklab,var(--border-muted),var(--color-accent) 22%);--card-pad-y:var(--space-md);--card-pad-x:var(--space-lg);--card-accent-w-sm:.2rem;--card-accent-w-md:.28rem;--card-accent-color:var(--color-accent);--tbl-label-col:8rem;--tbl-col-gap:var(--space-xs);--tbl-row-gap:var(--space-2xs);--tbl-row-pad-y:.4rem;--tbl-title-line-gap:5.25rem;--tbl-cta-fs:var(--step-1);--event-card-max-compact:51.25rem;--label-col:var(--tbl-label-col);--event-row-col-gap:var(--tbl-col-gap);--event-row-row-gap:var(--tbl-row-gap);--event-row-pad-y:var(--tbl-row-pad-y);--title-line-gap:var(--tbl-title-line-gap);--event-label-fs:var(--step-1);--event-label-lh:var(--lh-tight);--event-label-color:var(--color-text-muted);--event-label-text-color:var(--color-text-subtle);--event-primary-label-fs:var(--step-2);--event-subevent-label-fs:var(--step-1);--event-primary-value-fs:var(--step-2);--event-subevent-value-fs:var(--step-1);--event-cta-fs:var(--tbl-cta-fs);--frame-outer-color:color-mix(in oklab,var(--color-text),black 10%);--frame-inner-color:color-mix(in oklab,var(--color-text),white 42%);--frame-outer-w:2px;--frame-inner-w:1px;--frame-gap:.5rem;--frame-radius-outer:var(--card-radius);--frame-corner-size:22px;--frame-subtle-outer-color:color-mix(in oklab,var(--color-accent),var(--color-text) 24%);--frame-subtle-inner-color:color-mix(in oklab,var(--color-accent),white 60%);--frame-subtle-outer-w:1px;--frame-subtle-inner-w:1px;--frame-subtle-gap:.35rem} .event-info{max-inline-size:var(--event-card-max-compact,51.25rem);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow),var(--card-sheen);position:relative;overflow:visible} .event-info.primary{padding:var(--card-pad-y) var(--card-pad-x)} .event-info.subevent{padding:var(--card-pad-y) var(--card-pad-x)} .event-info-title{position:relative;margin:0 0 var(--space-xs);padding:.25rem 0;font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--ls-subtle);line-height:var(--lh-tight);text-align:center} .event-info.primary .event-info-title{font-size:var(--event-title-primary-fs,var(--step-4));color:var(--event-title-primary-color,var(--color-text))} .event-info.subevent .event-info-title{font-size:var(--event-title-subevent-fs,var(--step-3));color:var(--event-title-subevent-color,var(--color-text-muted))} .event-info-title::before,.event-info-title::after{content:"";position:absolute;top:50%;transform:translateY(-50%);block-size:var(--rule-thin);background:var(--rule-color);border-radius:var(--radius-md)} .event-info-title::before{left:0;inline-size:calc(50% - var(--title-line-gap,var(--tbl-title-line-gap)))} .event-info-title::after{right:0;inline-size:calc(50% - var(--title-line-gap,var(--tbl-title-line-gap)))} .event-info-row{display:grid;grid-template-columns:var(--label-col,var(--tbl-label-col)) 1fr;column-gap:var(--event-row-col-gap,var(--tbl-col-gap));row-gap:var(--event-row-row-gap,var(--tbl-row-gap));align-items:baseline;margin:0;padding-block:var(--event-row-pad-y,var(--tbl-row-pad-y));border-bottom:var(--rule-thin) var(--rule-style) var(--rule-color)} .event-info-row:first-of-type{border-top:var(--rule-thin) var(--rule-style) var(--rule-color);padding-top:.5rem} .event-info-row:last-of-type{border-bottom:none} .event-info-label{display:flex;align-items:flex-start;gap:var(--space-2xs);color:var(--event-label-color,var(--color-text-muted));font-weight:var(--weight-bold);font-size:var(--event-label-fs,var(--step-1));line-height:var(--event-label-lh,var(--lh-tight))} .event-info-label-text{font-family:var(--font-body-i);color:var(--event-label-text-color,var(--color-text-subtle))} .event-info.primary .event-info-label-text{font-size:var(--event-primary-label-fs,var(--step-2))} .event-info.subevent .event-info-label-text{font-size:var(--event-subevent-label-fs,var(--step-1))} .event-info-value{line-height:var(--lh-normal);color:var(--color-text);word-break:break-word} .event-info.primary .event-info-value{font-size:var(--event-primary-value-fs,var(--step-2))} .event-info.subevent .event-info-value{font-size:var(--event-subevent-value-fs,var(--step-1))} .event-info-value a{font-weight:var(--weight-bold)} .event-info-subtext,.event-info-placeholder{display:block;margin-top:var(--space-3xs);font-family:var(--font-body-i);font-size:var(--step-1);color:var(--color-text-muted)} .event-info-intro{max-inline-size:54ch;margin:0 auto var(--space-md);text-align:center;font-family:var(--font-body);font-size:var(--step-1);line-height:var(--lh-comfy);color:var(--color-text-muted)} .event-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--space-xs);margin:0 0 var(--space-sm)} .event-actions > *{display:flex} .event-actions .event-info-calendar{padding:0} .event-actions .button, .event-actions .event-info-calendarbutton{min-block-size:var(--btn-h-md);inline-size:100%} .event-info-calendar{position:relative;display:inline-block;padding:var(--space-sm) 0;z-index:var(--z-modal)} .event-info-calendarmenu{list-style:none;margin:0;padding:.25rem 0;position:absolute;top:100%;left:0;min-inline-size:var(--event-cal-menu-minw,14rem);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);display:none;z-index:var(--z-modal);overflow:hidden} .event-info-calendar.open .event-info-calendarmenu{display:block;margin-top:.125rem} .event-info-calendarmenu a{font-size:var(--step-1);display:block;inline-size:100%;text-decoration:none;color:var(--on-surface);background:none} .event-info-calendarmenu a:hover{text-decoration:underline} .event-info-calendarmenu li{display:flex;align-items:center;gap:var(--event-cal-menu-li-gap,.5rem);padding:var(--event-cal-menu-li-pad,.5rem .75rem);border-bottom:var(--rule-thin) var(--rule-style) var(--rule-color)} .event-info-calendarmenu li:last-child{border-bottom:none} .event-info-row.rsvp-row .event-info-value{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap} .event-info .button{font-size:var(--event-cta-fs,var(--btn-fs))} .is-framed{--frame-current-outer-color:var(--frame-outer-color);--frame-current-inner-color:var(--frame-inner-color);--frame-current-outer-w:var(--frame-outer-w);--frame-current-inner-w:var(--frame-inner-w);--frame-current-gap:var(--frame-gap);--frame-current-radius:var(--frame-radius-outer);position:relative;border:var(--frame-current-outer-w) solid var(--frame-current-outer-color)!important;border-radius:var(--frame-current-radius);box-shadow:var(--card-shadow),var(--card-sheen);background-clip:padding-box} .is-framed::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} .is-framed-subtle{--frame-current-outer-color:transparent;--frame-current-inner-color:var(--frame-subtle-inner-color);--frame-current-outer-w:1px;--frame-current-inner-w:var(--frame-subtle-inner-w);--frame-current-gap:var(--frame-subtle-gap);--frame-current-radius:var(--card-radius);position:relative;border:var(--frame-current-outer-w) solid transparent !important;border-radius:var(--frame-current-radius);box-shadow:var(--card-shadow),var(--card-sheen);background-clip:padding-box} .is-framed-subtle::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} .event-info.primary.is-framed,.event-info.subevent.is-framed{--frame-current-outer-color:var(--frame-outer-color);--frame-current-inner-color:color-mix(in oklab,var(--color-text),white 54%);--frame-current-outer-w:var(--frame-outer-w);--frame-current-inner-w:var(--frame-inner-w);--frame-current-radius:var(--frame-radius-outer);position:relative;border:var(--frame-current-outer-w) solid var(--frame-current-outer-color)!important;border-radius:var(--frame-current-radius);padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--card-shadow),var(--card-sheen);background:var(--card-bg);background-clip:padding-box;isolation:isolate} .event-info.primary.is-framed{--frame-current-gap:.58rem} .event-info.subevent.is-framed{--frame-current-gap:.52rem} .sr-only{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (max-width:37.5em){:root{--frame-outer-w:1.5px;--frame-inner-w:.75px;--frame-gap:.42rem;--frame-subtle-gap:.28rem}[data-page="details"] .event-info-row.rsvp-row{grid-template-columns:1fr}[data-page="details"] .event-info-row.rsvp-row .event-info-value{margin-top:.25rem}} /* ================================================ ๐Ÿ“„ Section Shells ================================================ */ :root{container-type:inline-size;container-name:section;--section-z:var(--z-base);--section-max:var(--container-lg);--section-inline:var(--inline-lg);--section-bg:var(--color-surface);--section-border:transparent;--section-radius:var(--radius-md);--section-shadow:none;--section-pad-y:var(--space-lg);--section-pad-x:var(--space-lg);--section-margin-y:var(--space-md);--section-title-ff:var(--font-display);--section-title-fs:var(--type-hero-title-fs);--section-title-color:var(--on-surface);--section-title-weight:var(--weight-bold);--section-title-align:center;--section-title-mb:var(--space-md);--section-heading-ff:var(--font-body);--section-heading-fs:var(--type-section-title-fs);--section-heading-color:var(--on-surface);--section-heading-weight:var(--weight-bold);--section-heading-mt:var(--space-lg);--section-heading-mb:var(--space-sm);--section-p-ff:var(--font-body);--section-p-fs:var(--type-body-fs);--section-p-color:var(--on-surface);--section-p-lh:var(--lh-comfy);--section-p-mb:var(--space-sm);--section-p-mx:0} .section{position:relative;z-index:var(--section-z);inline-size:var(--section-inline);max-inline-size:var(--section-max);margin:var(--section-margin-y) auto;padding:var(--section-pad-y) var(--section-pad-x);background:var(--section-bg);border:var(--section-border);border-radius:var(--section-radius);box-shadow:var(--section-shadow)} .section.is-muted{background:var(--color-surface-muted)} .section.is-flat{box-shadow:none} .section.is-tight{padding:var(--space-md) var(--space-md)} .section.is-loose{padding:clamp(var(--space-lg),5vw,var(--space-2xl))} .section.is-fullbleed{inline-size:100vw;max-inline-size:100vw;margin-inline:calc(50% - 50vw);padding-inline:0;border-radius:0} @supports (width:100dvw){.section.is-fullbleed{inline-size:100dvw;margin-inline:calc(50% - 50dvw)}} .section.is-fullbleed .media-strip{inline-size:100%;max-inline-size:none;margin:0;padding-inline:0;border-radius:0;box-shadow:none} .section.is-fullbleed .media-grid{inline-size:100vw;max-inline-size:100vw;margin:var(--space-md) 0 0;padding-bottom:.75rem;scrollbar-gutter:stable} .section .title{font-family:var(--section-title-ff);font-size:var(--section-title-fs);color:var(--section-title-color);font-weight:var(--section-title-weight);text-align:var(--section-title-align);margin-bottom:var(--section-title-mb)} .section .heading{font-family:var(--section-heading-ff);font-size:var(--section-heading-fs);color:var(--section-heading-color);font-weight:var(--section-heading-weight);margin:var(--section-heading-mt) 0 var(--section-heading-mb)} .section .prose{font-family:var(--section-p-ff);font-size:var(--section-p-fs);color:var(--section-p-color);line-height:var(--section-p-lh);margin-bottom:var(--section-p-mb);margin-left:var(--section-p-mx);margin-right:var(--section-p-mx)} @media (max-width:56.25em){.section{--section-inline:min(96%,var(--section-max));--section-max:100%;--section-pad-x:clamp(var(--space-sm),4vw,var(--space-xl));--section-title-fs:var(--step-4);--section-heading-fs:var(--step-3);--section-p-fs:var(--step-1);--section-p-mx:2vw;--section-shadow:none}} @media (max-width:37.5em){.section{--section-title-fs:1.6rem;--section-p-fs:1rem}} /* ================================================ ๐Ÿ” Headers ================================================ */ /* Shared interior-page framing */ :root{--page-shell-gap:clamp(1.5rem,1rem + 1.4vw,2.5rem);--page-hero-max:48rem;--page-title-fs:var(--type-hero-title-fs);--page-lede-max:46rem;--page-highlight-min:16rem;--page-highlights-max:var(--container-lg);--page-highlight-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 92%,white),color-mix(in oklab,var(--color-surface-muted) 84%,white));--page-chip-bg:color-mix(in oklab,var(--color-surface) 88%,transparent);--page-chip-bg-active:var(--color-action);--page-chip-color-active:var(--on-action)} .page-shell{position:relative;display:grid;gap:var(--page-shell-gap);overflow:hidden;isolation:isolate} .page-shell::before,.page-shell::after{content:"";position:absolute;border-radius:999px;pointer-events:none;z-index:-1;filter:blur(16px);opacity:.52} .page-shell::before{top:-5rem;right:-5rem;inline-size:18rem;block-size:18rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 22%,transparent),transparent 72%)} .page-shell::after{bottom:-6rem;left:-5rem;inline-size:19rem;block-size:19rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-action) 20%,transparent),transparent 70%)} .page-hero{max-inline-size:var(--page-hero-max);inline-size:min(100%,var(--page-hero-max));margin:0 auto;display:grid;justify-items:center;gap:var(--space-xs);text-align:center} .page-hero--split{max-inline-size:var(--container-lg);inline-size:min(100%,var(--container-lg));grid-template-columns:minmax(0,1.05fr) minmax(16rem,.95fr);justify-items:stretch;align-items:start;text-align:left;gap:clamp(1rem,2vw,2rem)} .page-hero-copy{display:grid;gap:var(--space-xs);align-content:start} .page-eyebrow,.page-section-kicker,.page-highlight__eyebrow{margin:0;font-family:var(--font-body);font-size:var(--type-kicker-fs);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .page-title{margin:0;font-family:var(--font-display);font-size:var(--page-title-fs);line-height:1.04;color:var(--color-text);text-wrap:balance} .section .page-title{margin-bottom:0} .page-lede,.page-section-copy{margin:0 auto;color:var(--color-text-muted);font-size:var(--type-body-fs);line-height:var(--lh-comfy);max-inline-size:var(--page-lede-max);text-wrap:balance} .page-hero-note{margin:0 auto;color:var(--color-text);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy);max-inline-size:42rem;text-wrap:pretty} .page-hero--split .page-lede,.page-hero--split .page-section-copy{margin-inline:0} .page-jump-links,.page-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .page-hero--split .page-jump-links,.page-hero--split .page-actions{justify-content:flex-start} .page-jump-links a{text-decoration:none!important;background:var(--page-chip-bg);transition:var(--transition-color),var(--transition-elevate)} .page-jump-links a:hover,.page-jump-links a:focus-visible,.page-jump-links a.is-active{background:var(--page-chip-bg-active);color:var(--page-chip-color-active);border-color:transparent} .page-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--page-highlight-min),100%),1fr));gap:var(--space-md);inline-size:min(100%,var(--page-highlights-max));margin:0 auto} .page-highlight{min-block-size:100%;display:grid;gap:var(--space-xs);padding:var(--card-pad-y) var(--card-pad-x);border:var(--card-border);border-radius:var(--card-radius);background:var(--page-highlight-bg);box-shadow:var(--card-shadow)} .page-highlight h3{margin:0;font-family:var(--font-display);font-size:var(--type-card-title-fs);line-height:var(--lh-tight);color:var(--color-text)} .page-highlight p{margin:0;color:var(--color-text);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy)} .page-highlight ul{display:grid;gap:.28rem;margin:0;padding-left:1.1rem;color:var(--color-text);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy)} .page-section-head{display:grid;gap:.35rem;max-inline-size:44rem;margin:0 auto var(--space-lg);text-align:center} .page-section-head--left{margin-inline:0 auto;justify-items:start;text-align:left} .page-section-title{margin:0;font-family:var(--font-display);font-size:var(--type-section-title-fs);line-height:var(--lh-tight);color:var(--color-text)} .page-meta-list{list-style:none;display:grid;gap:var(--space-2xs);margin:0;padding:0} .page-meta-list li{display:grid;gap:.08rem} .page-meta-label{font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)} .page-meta-value{color:var(--color-text);font-size:var(--step-1);line-height:var(--lh-normal)} @media (max-width:56.25em){.page-hero--split{grid-template-columns:1fr;justify-items:center;text-align:center}.page-hero--split .page-hero-copy{justify-items:center}.page-hero--split .page-lede,.page-hero--split .page-section-copy{margin-inline:auto}.page-hero--split .page-jump-links,.page-hero--split .page-actions{justify-content:center}.page-section-head--left{margin-inline:auto;justify-items:center;text-align:center}} @media (max-width:37.5em){.page-shell::before,.page-shell::after{inline-size:15rem;block-size:15rem}.page-highlight{padding:var(--space-md)}} header.wedding-header .header-toggle,.slide-nav,.sticky-desktop-nav{display:none} :root{--header-position:relative;--header-top:auto;--header-z:var(--z-nav);--header-inline:min(94%,70rem);--header-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-surface-muted),white 24%),color-mix(in oklab,var(--color-surface-muted),var(--color-bg) 32%));--header-border:1px solid color-mix(in oklab,var(--border-muted),white 10%);--header-pad-x:var(--section-pad-x);--header-pad-y:clamp(.8rem,1.1vw,1.35rem);--header-pad-top:0;--header-shadow:0 .75rem 2rem rgba(62,52,35,.06);--header-text-align:center;--header-crest-maxw:10.75rem;--header-crest-h:auto;--header-crest-mt:0;--header-crest-mb:-.1rem;--header-title-ff:var(--section-title-ff);--header-title-fs:clamp(1.8rem,1.45rem + .9vw,2.35rem);--header-title-color:var(--section-title-color);--header-title-lh:1.02;--header-title-m:0 0 .2rem;--header-subtitle-ff:var(--section-heading-ff);--header-subtitle-fs:clamp(.98rem,.25vw+.92rem,1.12rem);--header-subtitle-color:var(--section-heading-color);--header-subtitle-m:0;--header-subtitle-opacity:.86;--header-nav-gap:clamp(.22rem,.55vw,.55rem);--header-nav-link-ff:var(--section-p-ff);--header-nav-link-fs:clamp(.92rem,.1vw+.88rem,.98rem);--header-nav-link-weight:var(--weight-bold);--header-nav-link-color:var(--section-p-color);--header-nav-link-hover:var(--color-text);--header-nav-hit:40px;--header-nav-link-pad-x:.66rem;--header-nav-link-bg:transparent;--header-nav-link-hover-bg:color-mix(in oklab,var(--color-accent),white 78%);--header-nav-link-active-bg:color-mix(in oklab,var(--color-accent),white 70%);--header-nav-divider:max(1px,.0625rem);--header-active-underline-width:0;--header-active-underline-height:0;--header-active-underline-bottom:0;--header-active-underline-radius:var(--radius-md);--header-active-underline-color:var(--link-color);--header-portal-gap:var(--space-xs);--header-portal-color:rgba(255,255,255,.72);--header-portal-border:1px solid color-mix(in oklab,var(--border-muted),white 18%);--header-portal-shadow:0 .4rem 1rem rgba(62,52,35,.08);--header-portal-pad-y:.7rem;--header-portal-pad-x:1rem;--header-portal-radius:.95rem;--header-portal-max-inline-size:min(100%,24rem);--header-portal-kicker-fs:.72rem;--header-portal-copy-fs:var(--step-1);--header-portal-switch-border:1px solid color-mix(in oklab,var(--color-accent),white 20%);--header-portal-switch-shadow:none;--sticky-reveal-lead:20} header.wedding-header{container-type:inline-size;container-name:header;position:var(--header-position);top:var(--header-top);z-index:var(--header-z);background:var(--header-bg);text-align:var(--header-text-align);padding:var(--header-pad-top) var(--header-pad-x) var(--header-pad-y);box-shadow:var(--header-shadow);border-bottom:var(--header-border);transition:var(--transition-fade)} header.wedding-header .header-inner{position:relative;max-inline-size:var(--container-lg);inline-size:var(--header-inline);margin:0 auto;transition:opacity var(--dur-slow) var(--ease-standard);display:grid;justify-items:center;gap:clamp(.35rem,.8vw,.75rem)} header.wedding-header .header-inner::after{content:"";inline-size:min(100%,26rem);block-size:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--color-accent),white 28%),transparent);margin:var(--space-xs) auto 0} header.wedding-header .crest{max-width:var(--header-crest-maxw);height:var(--header-crest-h);margin:var(--header-crest-mt) auto var(--header-crest-mb);display:block;object-fit:contain;max-block-size:14vh;filter:drop-shadow(0 .25rem .6rem rgba(62,52,35,.08))} header.wedding-header .header-title,header.wedding-header .header-subtitle{margin:0;text-align:center} header.wedding-header .header-title{font-family:var(--header-title-ff);font-size:var(--header-title-fs);line-height:var(--header-title-lh);color:var(--header-title-color);margin:var(--header-title-m);font-weight:var(--weight-semibold,600)} header.wedding-header .header-subtitle{font-family:var(--header-subtitle-ff);font-size:var(--header-subtitle-fs);color:var(--header-subtitle-color);margin:var(--header-subtitle-m);opacity:var(--header-subtitle-opacity);font-weight:var(--weight-regular,400)} header.wedding-header .desktop-nav{inline-size:100%} header.wedding-header .desktop-nav ul{list-style:none;margin:var(--space-xs) auto 0;padding:.3rem .45rem;display:flex;justify-content:center;gap:var(--header-nav-gap);flex-wrap:wrap;row-gap:.34rem;inline-size:min(100%,70rem);max-inline-size:100%;background:rgba(255,255,255,.44);border:1px solid color-mix(in oklab,var(--border-muted),white 25%);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)} header.wedding-header .desktop-nav a{text-decoration:none;font-size:var(--header-nav-link-fs);font-weight:var(--header-nav-link-weight);color:var(--header-nav-link-color);display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--header-nav-hit);padding:0 var(--header-nav-link-pad-x);border-radius:999px;background:var(--header-nav-link-bg);transition:var(--transition-color),var(--transition-elevate)} header.wedding-header .desktop-nav a:hover{transform:translateY(-1px);background:var(--header-nav-link-hover-bg)} header.wedding-header .desktop-nav a.active{position:relative;color:var(--header-nav-link-hover);background:var(--header-nav-link-active-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-accent),white 32%)} header.wedding-header .desktop-nav a.active::after{content:"";position:absolute;left:50%;bottom:var(--header-active-underline-bottom);transform:translateX(-50%);inline-size:var(--header-active-underline-width);block-size:var(--header-active-underline-height);background:var(--header-active-underline-color);border-radius:var(--header-active-underline-radius)} header.wedding-header .portal-status{position:relative;z-index:var(--z-portal);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker action" "message action";align-items:center;column-gap:.62rem;row-gap:.08rem;inline-size:min(100%,var(--header-portal-max-inline-size));margin:var(--space-2xs) auto 0;padding:.5rem .75rem;font-family:var(--font-body);color:var(--on-surface);background:var(--header-portal-color);border:var(--header-portal-border);border-radius:var(--header-portal-radius);box-shadow:var(--header-portal-shadow);backdrop-filter:blur(10px) saturate(112%)} header.wedding-header .portal-kicker{grid-area:kicker;display:inline-flex;align-items:center;gap:.35rem;max-inline-size:100%;margin:0;font-size:.68rem;font-weight:var(--weight-bold);letter-spacing:.08em;line-height:1;white-space:nowrap;text-transform:uppercase;color:var(--color-text-subtle)} header.wedding-header .portal-kicker::before{content:"";inline-size:.48rem;block-size:.48rem;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 .16rem color-mix(in oklab,var(--color-accent),transparent 75%)} header.wedding-header .portal-status[data-state="signed-in"] .portal-kicker::before{background:var(--color-action);box-shadow:0 0 0 .18rem color-mix(in oklab,var(--color-action),transparent 70%)} header.wedding-header .portal-status[data-state="signed-in"]{background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface),white 10%),color-mix(in oklab,var(--color-surface-muted),var(--color-action) 8%));border-color:color-mix(in oklab,var(--color-action),var(--border-muted) 52%)} header.wedding-header .portal-status[data-state="wedding-day"]{background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface),white 12%),color-mix(in oklab,var(--color-surface-muted),var(--color-accent) 10%));border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 44%)} header.wedding-header .portal-status[data-state="wedding-day"] .portal-kicker::before{background:var(--color-accent);box-shadow:0 0 0 .18rem color-mix(in oklab,var(--color-accent),transparent 68%)} header.wedding-header .portal-signed-in{grid-area:message;display:grid;gap:0;margin:0;min-width:0;align-content:center;color:var(--color-text)} header.wedding-header .portal-party{font-size:clamp(.96rem,.16vw + .93rem,1.06rem);font-weight:var(--weight-bold);line-height:1.12;text-wrap:balance} header.wedding-header .portal-detail{font-size:.86rem;line-height:1.3;color:var(--color-text-muted);text-wrap:balance} header.wedding-header .portal-detail[hidden]{display:none} header.wedding-header .portal-status .portal-switch{grid-area:action;align-self:center;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:.36rem;min-block-size:2.45rem;min-inline-size:6rem;padding:.38rem .7rem;font:inherit;font-size:.92rem;font-weight:var(--weight-bold);color:var(--btn-ghost-color);background:var(--btn-ghost-bg);border:var(--btn-ghost-border);border-radius:var(--btn-radius);cursor:pointer;box-shadow:var(--btn-shadow);backdrop-filter:saturate(118%);transition:var(--transition-color),var(--transition-elevate),transform var(--dur-fast) var(--ease-standard)} header.wedding-header .portal-status .portal-switch:hover{background:var(--btn-ghost-bg-hover);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 42%);transform:var(--hover-move);box-shadow:var(--btn-shadow-hover)} header.wedding-header .portal-status .portal-switch:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-shadow)} header.wedding-header .portal-status .portal-switch[data-action="logout"]::after{content:"";inline-size:.42rem;block-size:.42rem;border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg)} @media (min-width:58.01em){header.wedding-header{--header-nav-link-fs:.95rem;--header-nav-link-pad-x:.66rem;--header-nav-hit:40px}} @media (min-width:68.01em){header.wedding-header{--header-inline:min(96%,82rem);--header-pad-y:clamp(.65rem,.85vw,.95rem);--header-crest-maxw:6.35rem;--header-title-fs:clamp(1.6rem,1.15rem + .62vw,1.95rem);--header-subtitle-fs:clamp(.9rem,.15vw+.86rem,1rem);--header-portal-max-inline-size:min(100%,23rem);--header-portal-pad-y:.55rem;--header-portal-pad-x:.85rem} header.wedding-header .header-inner{grid-template-columns:minmax(5.75rem,6.4rem) minmax(18rem,1fr) minmax(18.5rem,23rem);grid-template-areas:"crest title portal" "crest subtitle portal" "nav nav nav";justify-items:stretch;align-items:center;column-gap:clamp(.9rem,1.6vw,1.75rem);row-gap:.1rem} header.wedding-header .header-inner::after{display:none} header.wedding-header .crest{grid-area:crest;justify-self:start;align-self:center;max-block-size:6.4rem;margin:0} header.wedding-header .header-title{grid-area:title;text-align:left;align-self:end;margin:0} header.wedding-header .header-subtitle{grid-area:subtitle;text-align:left;align-self:start;color:var(--color-text-muted);margin-top:.05rem} header.wedding-header .portal-status{grid-area:portal;justify-self:end;align-self:center;margin:0;inline-size:min(100%,18.75rem)} header.wedding-header .desktop-nav{grid-area:nav} header.wedding-header .desktop-nav ul{margin:.35rem auto 0;inline-size:min(100%,71rem)}} @media (max-width:58em){:root{top:0;--header-inline:min(100%,34rem);--header-pad-x:var(--space-sm);--header-pad-y:var(--space-sm);--header-pad-top:var(--space-2xs);--header-title-m:.2rem 0 0;--header-subtitle-m:.1rem 0 0;--header-title-fs:clamp(2rem,1.75rem + 1vw,2.35rem);--header-title-lh:var(--lh-tight);--header-subtitle-fs:var(--step-1);--header-crest-maxw:clamp(4.9rem,21vw,6.5rem);--header-portal-gap:var(--space-xs);--header-portal-max-inline-size:min(100%,27rem);--header-portal-pad-x:.95rem;--header-portal-pad-y:.8rem;--header-portal-switch-border:1px solid color-mix(in oklab,var(--color-accent),white 18%);--header-portal-switch-shadow:none;--mnav-toggle-top:1rem;--mnav-toggle-end:1rem;--mnav-toggle-size:3rem;--mnav-toggle-bg:var(--btn-ghost-bg);--mnav-toggle-border:var(--btn-ghost-border);--mnav-toggle-radius:var(--radius-lg);--mnav-toggle-shadow:var(--btn-shadow);--mnav-bar-color:var(--color-text);--mnav-bar-w:1.65em;--mnav-bar-h:.15em;--mnav-bar-gap:.36em;--mnav-top:4.75rem;--mnav-right:1rem;--mnav-w:min(82%,23rem);--mnav-h:calc(100dvh - var(--mnav-top));--mnav-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-surface),white 4%),color-mix(in oklab,var(--color-surface-muted),white 10%));--mnav-border:1px solid color-mix(in oklab,var(--border-muted),white 10%);--mnav-radius:1.1rem;--mnav-shadow:0 1rem 2rem rgba(62,52,35,.18);--mnav-pad:1rem;--mnav-link-pad-y:.85rem;--mnav-link-pad-x:1rem;--mnav-link-min-h:2.75rem;--mnav-link-fs:var(--step-2);--mnav-link-gap:var(--space-2xs);--mnav-active-bg:color-mix(in oklab,var(--color-accent),white 76%);--mnav-active-bar-w:.1875rem} header.wedding-header .desktop-nav{display:none} header.wedding-header .header-inner{padding-inline-end:calc(var(--mnav-toggle-size) + var(--space-xs));row-gap:var(--space-xs)} header.wedding-header .header-toggle{display:inline-flex;position:fixed;top:var(--mnav-toggle-top);right:var(--mnav-toggle-end);inline-size:var(--mnav-toggle-size);block-size:var(--mnav-toggle-size);align-items:center;justify-content:center;border-radius:var(--mnav-toggle-radius);background:var(--mnav-toggle-bg);border:var(--mnav-toggle-border);box-shadow:var(--mnav-toggle-shadow);cursor:pointer;z-index:var(--z-mnav);outline:0;transition:box-shadow .2s ease,transform .2s ease} header.wedding-header .header-toggle:hover{transform:var(--hover-move);background:var(--btn-ghost-bg-hover);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 42%);box-shadow:var(--btn-shadow-hover)} header.wedding-header .header-toggle:focus-visible{box-shadow:var(--focus-ring),var(--btn-shadow)} header.wedding-header .header-toggle::before,header.wedding-header .header-toggle::after{content:"";position:absolute;inline-size:var(--mnav-bar-w);block-size:var(--mnav-bar-h);background:var(--mnav-bar-color);border-radius:2px;transition:transform .22s ease,opacity .12s ease;left:0;right:0;margin-inline:auto} header.wedding-header .header-toggle::before{transform:translateY(calc(var(--mnav-bar-gap)*-1))} header.wedding-header .header-toggle::after{transform:translateY(var(--mnav-bar-gap))} header.wedding-header .header-toggle.open::before,header.wedding-header .header-toggle[aria-expanded="true"]::before{transform:rotate(45deg)} header.wedding-header .header-toggle.open::after,header.wedding-header .header-toggle[aria-expanded="true"]::after{transform:rotate(-45deg)} .slide-nav{display:block;position:fixed;top:var(--mnav-top);right:var(--mnav-right);inline-size:var(--mnav-w);max-inline-size:22rem;block-size:var(--mnav-h);background:var(--mnav-bg);border:var(--mnav-border);border-radius:var(--mnav-radius);box-shadow:var(--mnav-shadow);opacity:0;pointer-events:none;overflow:auto;z-index:var(--z-mnav);transition:transform .22s ease,opacity .18s ease;padding:var(--mnav-pad);transform:translateY(-.5rem) scale(.985)} .slide-nav.open{transform:none;opacity:1;pointer-events:auto} .slide-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs)} .slide-nav li{border-bottom:.0625em solid rgba(62,52,35,.08)} .slide-nav a{display:flex;align-items:center;gap:var(--mnav-link-gap);padding:var(--mnav-link-pad-y) var(--mnav-link-pad-x);min-block-size:var(--mnav-link-min-h);font-size:var(--mnav-link-fs);color:var(--header-nav-link-color)!important;text-decoration:none;transition:var(--transition-color),var(--transition-elevate)} .slide-nav a:hover{background:var(--mnav-active-bg);transform:translateX(.15rem)} .slide-nav a.active{background:var(--mnav-active-bg);position:relative;color:var(--color-text)!important} .slide-nav a.active::before{content:"";position:absolute;left:0;top:0;bottom:0;inline-size:var(--mnav-active-bar-w);background:var(--header-active-underline-color);border-radius:var(--radius-sm)} header.wedding-header .portal-status{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker action" "message action";justify-items:stretch;text-align:left;inline-size:min(100%,19rem)} header.wedding-header .portal-signed-in{justify-items:start} header.wedding-header .portal-status .portal-switch{justify-self:end;inline-size:auto;max-inline-size:none}} @media (min-width:58.01em) and (max-width:68em){header.wedding-header{--header-inline:min(95%,60rem);--header-pad-y:.9rem;--header-crest-maxw:5.75rem;--header-nav-gap:.2rem;--header-nav-link-pad-x:.66rem;--header-portal-max-inline-size:min(100%,21rem);--header-portal-pad-y:.55rem;--header-portal-pad-x:.8rem} header.wedding-header .header-inner{grid-template-columns:minmax(0,1fr) minmax(16.5rem,21rem);grid-template-areas:"crest portal" "title portal" "subtitle portal" "nav nav";justify-items:stretch;align-items:center;column-gap:1rem;row-gap:.15rem} header.wedding-header .header-inner::after{display:none} header.wedding-header .crest{grid-area:crest;justify-self:start;margin:0;max-block-size:5.75rem} header.wedding-header .header-title{grid-area:title;text-align:left;margin:0} header.wedding-header .header-subtitle{grid-area:subtitle;text-align:left;margin:0;color:var(--color-text-muted)} header.wedding-header .portal-status{grid-area:portal;justify-self:end;align-self:center;inline-size:min(100%,18.75rem);margin:0;text-align:left} header.wedding-header .portal-signed-in{justify-items:start} header.wedding-header .desktop-nav{grid-area:nav} header.wedding-header .desktop-nav ul{margin:.55rem auto 0;inline-size:min(100%,60rem)} header.wedding-header .portal-status .portal-switch{justify-self:end;inline-size:auto;min-inline-size:6.6rem} } @media (max-width:36em){header.wedding-header .portal-status{grid-template-columns:1fr;grid-template-areas:"kicker" "message" "action";justify-items:start;text-align:left;inline-size:min(100%,16.5rem);row-gap:.3rem}header.wedding-header .portal-kicker{font-size:.64rem;letter-spacing:.08em}header.wedding-header .portal-signed-in{justify-items:start}header.wedding-header .portal-status .portal-switch{justify-self:start;inline-size:auto;max-inline-size:none;min-inline-size:7rem}} @media (min-width:58.01em){.sticky-desktop-nav{--header-nav-link-fs:.95rem;--header-nav-link-pad-x:.66rem;--header-nav-hit:40px;position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);background:color-mix(in oklab,var(--color-surface-muted),white 22%);border-bottom:1px solid color-mix(in oklab,var(--border-muted),white 18%);backdrop-filter:blur(12px) saturate(115%);padding:.35rem var(--space-md);display:block;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .22s ease} .sticky-desktop-nav.visible{opacity:1;transform:translateY(0);pointer-events:auto;box-shadow:0 .5rem 1.2rem rgba(62,52,35,.12)} .sticky-desktop-nav ul{list-style:none;margin:0 auto;padding:.3rem .45rem;display:flex;justify-content:center;gap:var(--header-nav-gap);flex-wrap:wrap;row-gap:.34rem;inline-size:min(100%,70rem);max-inline-size:100%;background:rgba(255,255,255,.72);border:1px solid color-mix(in oklab,var(--border-muted),white 25%);border-radius:999px} .sticky-desktop-nav a{text-decoration:none;font-size:var(--header-nav-link-fs);font-weight:var(--header-nav-link-weight);color:var(--header-nav-link-color)!important;display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--header-nav-hit);padding:0 var(--header-nav-link-pad-x);border-radius:999px;transition:var(--transition-color),var(--transition-elevate)} .sticky-desktop-nav a:hover{transform:translateY(-1px);background:var(--header-nav-link-hover-bg)} .sticky-desktop-nav a.active{position:relative;color:var(--header-nav-link-hover)!important;background:var(--header-nav-link-active-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-accent),white 32%)} .sticky-desktop-nav a.active::after{content:"";position:absolute;left:50%;bottom:var(--header-active-underline-bottom);transform:translateX(-50%);inline-size:var(--header-active-underline-width);block-size:var(--header-active-underline-height);background:var(--header-active-underline-color);border-radius:var(--header-active-underline-radius)}} @media (min-width:58.01em) and (max-width:68em){.sticky-desktop-nav{--header-nav-gap:.2rem}.sticky-desktop-nav ul{inline-size:min(100%,60rem)}} @media (min-width:68.01em){.sticky-desktop-nav ul{inline-size:min(100%,71rem)}} @media (max-width:26.75em){header.wedding-header{--header-portal-max-inline-size:min(100%,22rem)}header.wedding-header .portal-status{inline-size:min(100%,15.75rem)}.slide-nav{block-size:min(78vh,38.75em)}} @supports (-webkit-touch-callout:none){html.no-scroll,html.no-scroll body{height:100%;overflow:hidden}} #nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity var(--dur-fast,.2s) var(--ease-standard,ease);z-index:var(--z-scrim)} #nav-scrim.show{opacity:1;pointer-events:auto} html.no-scroll{overflow:hidden} /* ================================================ โณ Footer ================================================ */ :root{--footer-position:relative;--footer-z:var(--z-nav);--footer-inline:min(92%,var(--container-lg));--footer-bg:linear-gradient(180deg,color-mix(in oklab,var(--color-surface-muted),white 10%),color-mix(in oklab,var(--color-accent),white 58%));--footer-border:1px solid color-mix(in oklab,var(--border-muted),white 12%);--footer-pad-x:var(--section-pad-x);--footer-pad-y:clamp(1rem,1.4vw,1.5rem);--footer-align:center;--footer-margin-top:auto;--footer-text-ff:var(--section-p-ff);--footer-text-fs:var(--step-1);--footer-text-color:var(--color-text);--footer-link-color:var(--color-text);--footer-link-hover-color:var(--color-accent);--footer-support-max:46rem;--footer-support-title-fs:clamp(1.15rem,1rem + .5vw,1.45rem)} footer{container-type:inline-size;container-name:footer;position:var(--footer-position);z-index:var(--footer-z);background:var(--footer-bg);text-align:var(--footer-align);padding:var(--footer-pad-y) var(--footer-pad-x);margin-top:var(--footer-margin-top);border-top:var(--footer-border)} footer .footer-inner{max-inline-size:var(--container-lg);inline-size:var(--footer-inline);margin:0 auto;display:grid;gap:var(--space-sm);justify-items:center} .footer-support{inline-size:min(100%,var(--footer-support-max));display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "copy actions";align-items:center;justify-items:start;column-gap:clamp(1rem,2vw,1.75rem);row-gap:.2rem;padding:0 0 var(--space-md);margin:0 0 var(--space-xs);border-bottom:1px solid color-mix(in oklab,var(--border-muted),white 18%);text-align:left} .footer-support__title{grid-area:title;margin:0;font-family:var(--font-display);font-size:var(--footer-support-title-fs);line-height:var(--lh-tight);color:var(--color-text)} .footer-support__copy{grid-area:copy;margin:0;max-inline-size:38ch;font-size:var(--step-1);line-height:1.55;color:var(--color-text-muted)} .footer-support__actions{grid-area:actions;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.65rem} .footer-support__actions .button{min-block-size:var(--btn-h-sm);padding:.42rem .95rem;font-size:var(--step-1);box-shadow:0 .35rem .85rem rgba(62,52,35,.08),inset 0 1px 0 rgba(255,255,255,.7)} .footer-top{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);inline-size:100%} .footer-text{margin:0;max-inline-size:48ch;font-family:var(--footer-text-ff);font-size:var(--footer-text-fs);color:var(--color-text-muted);font-style:italic;line-height:1.45} .footer-meta{margin:0;font-size:var(--step-0);color:var(--color-text-muted)} .footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1rem;max-inline-size:48rem} .footer-nav a{display:inline-flex;align-items:center;justify-content:center;padding:.15rem 0;font-weight:var(--weight-bold);font-size:var(--step-0);letter-spacing:.04em} footer a{color:var(--footer-link-color);text-decoration:none;text-underline-offset:var(--link-underline-offset);transition:var(--transition-color)} footer a:hover{color:var(--footer-link-hover-color)} footer a:focus-visible{outline:0;box-shadow:var(--focus-ring)} /* ================================================ ๐Ÿ” Back to Top Button ================================================ */ .back-to-top{position:fixed;right:var(--space-md);bottom:var(--space-md);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-inline-size:2.75rem;block-size:2.75rem;padding:0 .85rem;border:var(--btn-primary-border);border-radius:var(--btn-radius);background:var(--btn-primary-bg);color:var(--btn-primary-color);font-size:1rem;font-weight:var(--weight-bold);cursor:pointer;box-shadow:var(--btn-primary-shadow);backdrop-filter:blur(10px) saturate(118%);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background-color .2s ease,box-shadow .2s ease;z-index:calc(var(--footer-z) + 5)} .back-to-top:hover{transform:translateY(-2px);background:var(--btn-primary-bg-hover);box-shadow:var(--btn-primary-shadow-hover)} .back-to-top:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-primary-shadow)} .back-to-top__icon{font-size:1.05rem;line-height:1} .back-to-top__label{font-size:var(--step-1);line-height:1} .back-to-top.show{opacity:1;visibility:visible} @media (max-width:56.25em){footer{--footer-pad-x:var(--space-sm);--footer-pad-y:var(--space-sm)}.footer-support{inline-size:min(100%,34rem);grid-template-columns:1fr;grid-template-areas:"title" "copy" "actions";justify-items:center;text-align:center;row-gap:var(--space-2xs)}.footer-support__copy{max-inline-size:34ch}.footer-support__actions{justify-content:center}.footer-top{justify-content:center}.footer-nav{gap:.35rem .7rem}.back-to-top{right:var(--space-sm);bottom:var(--space-sm)}} @media (max-width:37.5em){.back-to-top{padding:0;inline-size:2.9rem}.back-to-top__label{display:none}} /* ================================================ ๐Ÿ’ป Loading Screen ================================================ */ :root{--loading-bg:radial-gradient(circle at top,rgba(255,255,255,.75),transparent 38%),linear-gradient(180deg,#fffaf6 0%,#f7eee4 52%,#f2e5d8 100%);--loading-z:var(--z-loading);--loading-transition:opacity var(--dur-mid) var(--ease-standard),visibility var(--dur-mid) var(--ease-standard);--loading-backdrop-filter:blur(.4rem) saturate(1.1);--loading-safe-top:env(safe-area-inset-top);--loading-panel-w:min(92vw,24rem);--loading-panel-pad:clamp(1rem,2.5vw,1.5rem);--loading-panel-bg:rgba(255,252,248,.78);--loading-panel-border:1px solid color-mix(in oklab,var(--border-muted),white 24%);--loading-panel-shadow:0 1.25rem 2.5rem rgba(112,82,48,.1);--loading-icon-w:clamp(8.5rem,22vw,12rem);--loading-icon-h:clamp(8.5rem,22vw,12rem);--loading-gap:var(--space-2xs);--loading-text-fs:var(--step-2);--loading-kicker-fs:var(--step-0)} #loading-screen{opacity:1;visibility:visible;position:fixed;inset:0;z-index:var(--loading-z);display:flex;align-items:center;justify-content:center;padding:calc(var(--loading-safe-top) + var(--space-md)) var(--space-md) var(--space-md);background:var(--loading-bg);backdrop-filter:var(--loading-backdrop-filter);transition:var(--loading-transition);overflow:hidden;isolation:isolate} #loading-screen::before,#loading-screen::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(.25rem)} #loading-screen::before{width:30rem;height:30rem;top:-12rem;left:-9rem;background:radial-gradient(circle,rgba(214,168,158,.22),transparent 70%)} #loading-screen::after{width:24rem;height:24rem;right:-8rem;bottom:-10rem;background:radial-gradient(circle,rgba(182,196,154,.22),transparent 68%)} #loading-screen .loader-inner{position:relative;display:grid;justify-items:center;gap:var(--loading-gap);width:var(--loading-panel-w);padding:var(--loading-panel-pad);text-align:center;background:var(--loading-panel-bg);border:var(--loading-panel-border);border-radius:clamp(1rem,2vw,1.5rem);box-shadow:var(--loading-panel-shadow);backdrop-filter:blur(.2rem);transform:translateY(0);transition:transform var(--dur-mid) var(--ease-standard),opacity var(--dur-mid) var(--ease-standard)} #loading-screen .loader-icon{width:var(--loading-icon-w);height:var(--loading-icon-h);display:block} #loading-screen .loader-text{font-family:var(--font-body);font-size:var(--loading-text-fs);line-height:1.35;color:var(--color-text);opacity:var(--opacity-full);margin:0;max-width:20ch;text-wrap:balance} #loading-screen .loader-kicker{margin:0;font-family:var(--font-body-i);font-size:var(--loading-kicker-fs);color:var(--color-text-muted);letter-spacing:var(--ls-subtle)} #loading-screen.hide .loader-inner{opacity:0;transform:translateY(.35rem)} #loading-screen.hide{opacity:0;visibility:hidden;pointer-events:none} html.is-loading,html.is-loading body{overflow:hidden} #loading-screen.is-for-nav{transition:none} @media (prefers-reduced-motion:reduce){#loading-screen{transition:opacity var(--dur-fast) linear;backdrop-filter:none}} @media (max-width:56.25em){:root{--loading-text-fs:var(--step-1)}} @media (max-width:37.5em){:root{--loading-panel-pad:.95rem;--loading-icon-w:8rem;--loading-icon-h:8rem}#loading-screen .loader-inner{gap:var(--space-xs)}} /* ================================================ ๐Ÿ“ฆ Media System (shared grid + strips + lightbox) ================================================ */ :root{--media-max:var(--container-lg);--media-inline:min(92%,var(--media-max));--media-gap:var(--space-xs);--media-gap-balanced:var(--space-sm);--media-min:13.75rem;--media-aspect:3/4;--media-radius:var(--card-radius);--media-bg:var(--card-bg-muted);--media-shadow:var(--card-shadow);--media-strip-max:var(--container-lg);--media-strip-inline:min(92%,var(--media-strip-max));--media-strip-pad-y:var(--space-lg);--media-strip-pad-x:clamp(var(--space-md),4vw,var(--space-xl));--media-strip-bg:var(--color-surface);--media-strip-radius:var(--radius-xl);--media-strip-title-fs:var(--step-4);--media-strip-title-ls:var(--ls-subtle);--media-strip-title-mb:var(--space-md);--media-strip-grid-min:220px;--media-strip-gap:var(--space-sm);--media-strip-img-radius:var(--radius-md);--media-strip-aspect:4/3;--lb-bg:var(--overlay-strong);--lb-max-w:min(92vw,87.5rem);--lb-max-h:86vh;--lb-radius:var(--card-radius);--lb-shadow:var(--card-shadow);--lb-safe-top:max(env(safe-area-inset-top),.25rem);--lb-safe-right:max(env(safe-area-inset-right),.25rem);--lb-safe-bottom:max(env(safe-area-inset-bottom),.25rem);--lb-safe-left:max(env(safe-area-inset-left),.25rem);--lb-ui-fs:var(--step-4);--lb-gap:.75rem;--media-caption-fs:var(--step-0);--media-caption-color:var(--color-text);--media-caption-overlay-bg:color-mix(in oklab,var(--overlay-strong) 50%,transparent);--media-caption-overlay-color:#fff;--media-caption-pad:.35rem .55rem;--media-caption-radius:.5rem;--media-caption-max-lines:2;--lb-caption-fs:var(--step-3);--lb-caption-color:#fff;--lb-caption-bg:color-mix(in oklab,var(--overlay-strong) 70%,transparent);--lb-caption-pad:.5rem .75rem;--lb-caption-radius:.6rem;--lb-caption-max-w:min(86ch,90vw);--lb-caption-lift:4rem} .media-strip{inline-size:100%;max-inline-size:var(--media-strip-max);box-sizing:border-box;padding:var(--media-strip-pad-y) var(--media-strip-pad-x);margin-inline:auto;overflow-x:hidden;background:var(--media-strip-bg);border-radius:var(--media-strip-radius)} .media-strip-title{font-family:var(--font-display);text-align:center;margin:0 0 var(--media-strip-title-mb);font-size:var(--media-strip-title-fs);letter-spacing:var(--media-strip-title-ls)} [data-page="details"] .media-strip-title{font-size:clamp(1.9rem,1.55rem + .85vw,2.45rem);font-weight:var(--weight-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-subtle);color:var(--color-text)} .media-grid,.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--media-min),100%),1fr));gap:var(--media-gap);max-inline-size:var(--media-max);inline-size:var(--media-inline);margin:var(--space-md) auto 0} .media-grid.is-balanced,.gallery-grid.is-balanced{gap:var(--media-gap-balanced);grid-template-columns:repeat(var(--media-cols,auto-fit),minmax(min(var(--media-min),100%),1fr))} .media-item,.gallery-item{position:relative;display:block;border-radius:var(--media-radius);overflow:hidden;background:var(--media-bg);box-shadow:var(--media-shadow);transition:var(--transition-elevate),box-shadow var(--dur-mid) var(--ease-standard);cursor:zoom-in;will-change:transform} .media-item:hover,.gallery-item:hover{transform:var(--hover-move)} .media-item:focus-visible,.gallery-item:focus-visible{outline:0;box-shadow:var(--focus-ring)} .media-item img,.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:var(--media-aspect);user-select:none;-webkit-user-drag:none} [data-media="strip"] .media-item img{aspect-ratio:var(--media-strip-aspect)} .media-item,.media-item img{inline-size:100%;display:block;border-radius:var(--media-strip-img-radius)} #lightbox{position:fixed;inset:0;background:color-mix(in oklab,var(--lb-bg),black 20%);backdrop-filter:blur(.25rem);display:none;align-items:center;justify-content:center;z-index:var(--z-lightbox);overscroll-behavior:contain;touch-action:none;cursor:zoom-out;padding:0 .75rem .75rem} #lightbox::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%,transparent 0% 60%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.45) 100%)} #lightbox.open,#lightbox[aria-hidden="false"]{display:flex} #lightbox-image{max-inline-size:var(--lb-max-w);max-block-size:var(--lb-max-h);border-radius:var(--lb-radius);border:.2rem solid rgba(255,255,255,.08);box-shadow:0 .5rem 2rem rgba(0,0,0,.45),0 .1rem .4rem rgba(0,0,0,.25);-webkit-user-drag:none;user-select:none;background:#000} .lb-close,.lb-prev,.lb-next{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem;font-size:clamp(1.25rem,2.5vw,1.6rem);border-radius:9999px;color:#fff;background:color-mix(in oklab,#000,transparent 70%);backdrop-filter:blur(.25rem);box-shadow:0 .25rem .75rem rgba(0,0,0,.35),inset 0 0 0 .0625rem rgba(255,255,255,.18);cursor:pointer;transition:var(--transition-color),var(--transition-elevate);outline:none} .lb-close{top:calc(var(--lb-safe-top) + 1rem);right:calc(var(--lb-safe-right) + 1rem)} .lb-prev{left:calc(var(--lb-safe-left) + 1rem);top:50%;transform:translateY(-50%)} .lb-next{right:calc(var(--lb-safe-right) + 1rem);top:50%;transform:translateY(-50%)} .lb-close:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{box-shadow:0 0 0 .2rem color-mix(in oklab,white,transparent 80%),0 .25rem .75rem rgba(0,0,0,.35)} .lb-prev::before,.lb-next::before{content:"";position:absolute;inset:-.5rem;border-radius:inherit;background:radial-gradient(80% 80% at 50% 50%,rgba(0,0,0,.45),transparent 70%);filter:blur(.15rem);z-index:-1} .lb-counter{position:absolute;bottom:calc(var(--lb-safe-bottom) + .25rem);left:50%;transform:translateX(-50%);color:#fff;font-family:var(--font-body);font-weight:var(--weight-bold);letter-spacing:.02em;padding:.25rem .6rem;border-radius:9999px;background:color-mix(in oklab,#000,transparent 65%);box-shadow:0 .25rem .75rem rgba(0,0,0,.35);font-size:var(--step-2);opacity:1} .media-caption{position:absolute;inset:auto .4rem .4rem .4rem;margin:0;padding:var(--media-caption-pad);max-inline-size:calc(100% - .8rem);border-radius:var(--media-caption-radius);background:var(--media-caption-overlay-bg);color:var(--media-caption-overlay-color);font-size:var(--media-caption-fs);line-height:1.25;opacity:0;transform:translateY(.25rem);transition:opacity .18s ease,transform .18s ease;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:var(--media-caption-max-lines);-webkit-box-orient:vertical;overflow:hidden} .media-item:focus-visible .media-caption,.gallery-item:focus-visible .media-caption,.media-item:hover .media-caption,.gallery-item:hover .media-caption{opacity:1;transform:translateY(0)} .media-item.is-caption-always .media-caption,.gallery-item.is-caption-always .media-caption{opacity:1;transform:none} .is-caption-below .media-item,.is-caption-below .gallery-item{display:flex;flex-direction:column;text-align:center;margin-inline:auto;gap:.35rem} .is-caption-below .media-caption{position:static;background:transparent;color:var(--media-caption-color);padding:0;text-shadow:none;opacity:1;transform:none;max-inline-size:unset} .lb-caption{position:absolute;left:50%;bottom:calc(var(--lb-safe-bottom) + var(--lb-caption-lift) + var(--lb-gap));transform:translateX(-50%);max-inline-size:var(--lb-caption-max-w);margin:0;padding:var(--lb-caption-pad);border-radius:var(--lb-caption-radius);background:var(--lb-caption-bg);color:var(--lb-caption-color);font-size:var(--lb-caption-fs);line-height:1.35;text-align:center;box-shadow:0 .25rem .75rem rgba(0,0,0,.35)} [data-prose-lightbox]{--media-aspect:auto} [data-prose-lightbox] .media-item img{aspect-ratio:auto} .pull-figure{max-inline-size:min(45%,22rem);margin:0 0 var(--space-md)} .pull-figure.right{float:inline-end;margin-inline:var(--space-md) 0} .pull-figure.left{float:inline-start;margin-inline:0 var(--space-md)} .pull-figure .media-item{text-decoration:none;border:0;border-radius:var(--media-strip-img-radius);overflow:hidden;box-shadow:var(--card-shadow)} .pull-figure img{display:block;inline-size:100%;height:auto} .pull-figure .media-caption,.pull-figure .media-caption a{position:static;background:transparent;color:var(--color-text-muted);padding:.35rem 0 0;text-shadow:none;opacity:.85;transform:none;max-inline-size:unset;font-family:var(--font-body-i);font-size:var(--step--1);line-height:1.3;text-decoration:none;border:0} @media (max-width:56.25em){.pull-figure{float:none;max-inline-size:100%;margin-inline:0}:root{--lb-max-w:min(94vw,75rem);--lb-max-h:82vh;--media-min:12.5rem;--media-gap-balanced:var(--space-xs)}.media-item img,.gallery-item img{aspect-ratio:1/1}} @media (max-width:37.5em){:root{--lb-max-w:96vw;--lb-max-h:88dvh;--lb-ui-fs:1.6rem}.lb-close,.lb-prev,.lb-next{min-inline-size:2.5rem;min-block-size:2.5rem;font-size:1.35rem}} @media (prefers-reduced-motion:reduce){.media-item,.gallery-item,.lb-close,.lb-prev,.lb-next{transition:var(--transition-color)}.lb-close:hover,.lb-prev:hover,.lb-next:hover,.media-item:hover,.gallery-item:hover{transform:none}} /* ================================================ ๐Ÿ” Guest Gating (Invite-tag Gating, Phase Gating) ================================================ */ :root{--gate-code-max:var(--container-sm);--gate-code-font-size:var(--step-1);--gate-code-mb:var(--space-sm);--gate-code-grid-col:1 / -1;--gate-code-panel-pad-y:var(--space-xs);--gate-code-panel-pad-x:var(--space-sm);--gate-code-label-ff:var(--font-body);--gate-code-label-fs:var(--step-4);--gate-code-label-weight:var(--weight-bold);--gate-code-label-color:var(--color-text);--gate-code-label-mb:var(--space-2xs);--gate-code-row-cols:1fr auto;--gate-code-row-gap:var(--space-2xs);--gate-code-active-gap:var(--space-2xs);--gate-code-pill-fs:var(--step-2);--gate-code-pill-letterspacing:var(--ls-slight);--gate-hint-fs:var(--step-1);--gate-hint-color:var(--color-text-muted);--gate-hint-mt:var(--space-2xs);--gate-overlay-bg:var(--overlay-strong);--gate-overlay-backdrop:blur(.25rem) saturate(120%);--gate-card-maxw:var(--container-sm);--gate-card-pad:var(--card-pad-x);--gate-card-align:center;--gate-form-gap:var(--space-xs);--gate-title-ff:var(--font-display);--gate-title-fs:var(--step-4);--gate-title-color:var(--color-text);--gate-title-mb:var(--space-sm);--gate-subtitle-ff:var(--font-body);--gate-subtitle-fs:var(--step-2);--gate-subtitle-color:var(--color-text);--gate-subtitle-mb:var(--space-sm);--gate-apply-mt:var(--space-sm);--gate-welcome-pad-y:var(--card-pad-y);--gate-welcome-pad-x:var(--card-pad-x);--gate-welcome-title-ff:var(--font-display);--gate-welcome-title-fs:var(--step-5);--gate-welcome-title-color:var(--color-text);--gate-welcome-name-ff:var(--font-body-i);--gate-welcome-name-fs:var(--step-4);--gate-welcome-name-color:var(--color-text)} .portal-hidden{display:none !important} .phase-hidden{display:none !important} #party-code-ui{font-size:var(--gate-code-font-size);max-inline-size:var(--gate-code-max);grid-column:var(--gate-code-grid-col);justify-self:center;display:flex;justify-content:center;margin:0 auto var(--gate-code-mb)} #party-code-ui .code-panel{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--gate-code-panel-pad-y) var(--gate-code-panel-pad-x);inline-size:auto} #party-code-ui .code-label{display:block;font-family:var(--gate-code-label-ff);font-size:var(--gate-code-label-fs);font-weight:var(--gate-code-label-weight);color:var(--gate-code-label-color);margin:0 0 var(--gate-code-label-mb)} #party-code-ui .code-row{display:grid;grid-template-columns:var(--gate-code-row-cols);gap:var(--gate-code-row-gap);align-items:center} #party-code-ui .code-row input{font-family:var(--field-ff);font-size:var(--field-fs);color:var(--field-color);padding:var(--field-pad-y) var(--field-pad-x);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-bg);transition:var(--transition-color)} #party-code-ui .code-row input::placeholder{color:var(--field-placeholder-color);opacity:var(--field-placeholder-opacity)} #party-code-ui .code-row input:focus{outline:0;border-color:var(--color-accent);box-shadow:0 0 0 .12rem color-mix(in oklab,var(--color-accent),transparent 75%)} #party-code-ui .code-row button,#party-code-ui .code-active-line .linklike{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:var(--weight-bold);font-size:var(--btn-fs);min-block-size:var(--btn-h-md);padding:var(--btn-pad-y) var(--btn-pad-x);background:var(--btn-primary-bg);color:var(--btn-primary-color);border:0;border-radius:var(--btn-radius);cursor:pointer;transition:var(--transition-elevate),var(--transition-color)} #party-code-ui .code-row button:hover,#party-code-ui .code-active-line .linklike:hover{background:var(--btn-primary-bg-hover);transform:translateY(-1px)} #party-code-ui .code-panel.active{display:flex;justify-content:space-between;align-items:center;gap:var(--gate-code-active-gap)} #party-code-ui .code-active-line{display:flex;align-items:center;gap:var(--space-xs)} #party-code-ui .code-active-line .code-label{margin:0} #party-code-ui .code-pill{font-size:var(--gate-code-pill-fs);letter-spacing:var(--gate-code-pill-letterspacing);background:var(--chip-filled-bg);color:var(--on-surface);border:var(--chip-outline-border);border-radius:var(--chip-radius);padding:var(--chip-pad-y) var(--chip-pad-x);font-weight:var(--weight-bold);box-shadow:var(--chip-shadow)} #party-code-ui .code-hint{font-size:var(--gate-hint-fs);color:var(--gate-hint-color);margin-top:var(--gate-hint-mt)} #portal-gate{position:fixed;inset:0;z-index:var(--z-portal);display:grid;place-items:center;background:var(--gate-overlay-bg);backdrop-filter:var(--gate-overlay-backdrop);pointer-events:auto;transition:var(--transition-fade);opacity:1;visibility:visible} #portal-gate.hide{opacity:0;visibility:hidden;transition:opacity .25s var(--ease-standard,ease),visibility 0s linear .25s} #portal-gate:not(.hide){transition:opacity .25s var(--ease-standard,ease)} #portal-gate .gate-card{inline-size:min(92vw,var(--gate-card-maxw));background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--gate-card-pad);text-align:var(--gate-card-align)} #portal-gate #gate-title,#portal-gate h2{font-family:var(--gate-title-ff);font-size:var(--gate-title-fs);margin:0 0 var(--gate-title-mb);color:var(--gate-title-color)} #portal-gate .gate-sub{font-family:var(--gate-subtitle-ff);font-size:var(--gate-subtitle-fs);color:var(--gate-subtitle-color);margin:0 0 var(--gate-subtitle-mb)} #portal-gate #gate-form{display:grid;gap:var(--gate-form-gap)} #portal-gate .gate-label{display:grid;gap:.35rem;text-align:left} #portal-gate .gate-field-label{font-size:var(--step-1);font-weight:var(--weight-bold);color:var(--color-text)} #portal-gate .gate-hint{min-block-size:1.2em;margin-top:var(--gate-hint-mt);font-size:var(--gate-hint-fs);color:var(--gate-hint-color)} #portal-gate .gate-help-row{display:flex;justify-content:center} #portal-gate .gate-link-button{appearance:none;background:none;border:0;padding:0;color:var(--link-color);font:inherit;font-weight:var(--weight-bold);cursor:pointer;text-decoration:underline;text-decoration-thickness:var(--link-underline-thickness);text-underline-offset:var(--link-underline-offset)} #portal-gate .gate-link-button:hover{color:var(--link-hover,var(--color-accent))} #portal-gate .gate-link-button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:.25rem} #portal-gate .gate-recovery[hidden]{display:none} #portal-gate .gate-recovery-form{display:grid;gap:var(--gate-form-gap)} #portal-gate .gate-recovery-note{margin:0;font-size:var(--step-1);line-height:var(--lh-comfy);color:var(--color-text-muted);text-align:left} #portal-gate .gate-recovery-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2xs);align-items:center} #portal-gate .gate-card.welcome{display: grid; place-items: center; inline-size: min(92vw, var(--gate-card-maxw)); max-inline-size: 92vw; box-sizing: border-box; padding: var(--gate-welcome-pad-y) var(--gate-welcome-pad-x); text-align: center;} #portal-gate .gate-welcome{display:grid;gap:var(--space-xs);max-inline-size:min(28rem,100%);justify-items:center} #portal-gate .gate-welcome,#portal-gate .gate-welcome-name{max-inline-size: 100%;overflow-wrap: anywhere;word-break: break-word;hyphens: auto;} .gate-welcome-title{font-family:var(--gate-welcome-title-ff);font-size:var(--gate-welcome-title-fs);color:var(--gate-welcome-title-color);margin:0} .gate-welcome-name{font-family:var(--gate-welcome-name-ff);font-size:var(--gate-welcome-name-fs);color:var(--gate-welcome-name-color);margin:0;opacity:0;animation:gateWelcomeFade var(--dur-slow) var(--ease-standard) forwards} .gate-welcome-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:0} .gate-welcome-code-label{font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)} #portal-gate .gate-welcome .code-pill{font-size:var(--gate-code-pill-fs);letter-spacing:var(--gate-code-pill-letterspacing);background:var(--chip-filled-bg);color:var(--chip-filled-color,var(--on-surface));border:var(--chip-outline-border);border-radius:var(--chip-radius);padding:var(--chip-pad-y) var(--chip-pad-x);font-weight:var(--weight-bold);box-shadow:var(--chip-shadow)} .gate-welcome-copy{margin:0;color:var(--color-text-muted);font-size:var(--step-1);line-height:var(--lh-comfy);text-wrap:balance} .gate-welcome-continue{margin-top:var(--space-2xs);min-inline-size:min(100%,11rem)} @keyframes gateWelcomeFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @media (max-width:56.25em){:root{--gate-code-font-size:var(--step-1);--gate-code-label-fs:.95rem;--gate-card-pad:var(--space-md);--gate-subtitle-fs:clamp(.95rem,3.2vw,1rem)}} @media (max-width:37.5em){:root{--gate-code-font-size:.95rem;--gate-card-pad:var(--space-sm)}#portal-gate .gate-recovery-actions{grid-template-columns:1fr}} html.no-scroll,body.no-scroll{overflow:hidden} :where([inert]){pointer-events:none !important;user-select:none !important} html[data-debug-gates="1"] [data-requires],html[data-debug-gates="1"] [data-requires-all],html[data-debug-gates="1"] [data-requires-not],html[data-debug-gates="1"] [data-phase],html[data-debug-gates="1"] [data-phase-min],html[data-debug-gates="1"] [data-phase-max]{outline:1px dashed color-mix(in oklab,var(--border-muted),transparent 30%);outline-offset:2px;position:relative} html[data-debug-gates="1"] [data-requires]::after,html[data-debug-gates="1"] [data-requires-all]::after,html[data-debug-gates="1"] [data-requires-not]::after,html[data-debug-gates="1"] [data-phase]::after,html[data-debug-gates="1"] [data-phase-min]::after,html[data-debug-gates="1"] [data-phase-max]::after{content:attr(data-phase) " " attr(data-phase-min) " " attr(data-phase-max) " / req:" attr(data-requires) " all:" attr(data-requires-all) " not:" attr(data-requires-not);font:600 .70rem/1.2 var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas);color:var(--color-text-muted);background:color-mix(in oklab,var(--color-surface,#fff),white 12%);border:1px solid var(--border-muted);border-radius:.25rem;padding:.15rem .3rem;position:absolute;inset-block-start:-1.2rem;inset-inline-start:0;pointer-events:none;z-index:2} #gate-inspector [data-phase],#gate-inspector [data-phase-min],#gate-inspector [data-phase-max],#gate-inspector [data-requires],#gate-inspector [data-requires-all],#gate-inspector [data-requires-not]{outline:none !important} #gate-inspector [data-phase]::after,#gate-inspector [data-phase-min]::after,#gate-inspector [data-phase-max]::after,#gate-inspector [data-requires]::after,#gate-inspector [data-requires-all]::after,#gate-inspector [data-requires-not]::after{content:none !important} #gate-inspector .gi-pill[aria-pressed="true"],#gate-inspector .gi-tag[aria-pressed="true"]{border-color:var(--color-accent,#8aa) !important;box-shadow:0 0 0 2px color-mix(in oklab,var(--color-accent,#8aa),transparent 70%) !important;font-weight:800 !important;background:color-mix(in oklab,var(--color-surface,#fff),var(--color-accent,#8aa) 10%) !important} } @layer pages{ /* ================================================ ๐ŸŒ… Home (hero, welcome, essentials, photo strip) ================================================= */ [data-page="home"]{container-type:inline-size;container-name:home;--hero-h:min(100dvh,56rem);--hero-bg:url('../images/hero.jpg') center/cover no-repeat;--hero-text-color:var(--color-surface);--hero-overlay-max:46rem;--hero-overlay-inline:min(70%,var(--hero-overlay-max));--hero-overlay-bg:color-mix(in oklab,var(--overlay-strong) 50%,transparent);--hero-overlay-blur:.15rem;--hero-overlay-pad-y:var(--card-pad-y);--hero-overlay-pad-x:var(--card-pad-x);--hero-overlay-radius:var(--card-radius);--hero-overlay-shadow:none;--hero-overlay-mx:var(--space-sm);--hero-title-fs:4rem;--hero-title-lh:var(--lh-tight);--hero-title-ls:var(--ls-subtle);--hero-subtitle-fs:var(--step-5);--hero-meta-fs:var(--step-3);--hero-countdown-fs:var(--step-2);--hero-body-gap:var(--space-2xs);--hero-chev-bottom:2rem;--hero-chev-size:2rem;--hero-chev-stroke:5px;--hero-chev-gap:var(--space-2xs);--hero-chev-color:var(--color-surface);--hero-chev-opacity:var(--opacity-full);--hero-chev-bounce-distance:.5rem;--hero-chev-bounce-dur:1.5s;--event-inline:var(--inline-lg);--media-strip-max:100vw;--media-strip-inline:100vw;--media-strip-pad-y:0;--media-strip-pad-x:0;--media-strip-bg:var(--color-surface);--media-strip-radius:0;--media-strip-title-fs:var(--step-4);--media-strip-title-ls:var(--ls-subtle);--media-strip-title-mb:var(--space-md);--media-strip-gap:var(--space-sm);--media-strip-img-radius:var(--radius-lg);--media-strip-aspect:1/1} .hero-banner{position:relative;min-block-size:var(--hero-h);inline-size:100%;background:var(--hero-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:var(--z-base);padding:var(--space-sm)} .hero-overlay{color:var(--hero-text-color);text-align:center;z-index:var(--z-modal);background:var(--hero-overlay-bg);backdrop-filter:blur(var(--hero-overlay-blur));padding:var(--hero-overlay-pad-y) var(--hero-overlay-pad-x);border-radius:var(--hero-overlay-radius);box-shadow:var(--hero-overlay-shadow);max-inline-size:var(--hero-overlay-max);inline-size:var(--hero-overlay-inline);margin:0 var(--hero-overlay-mx)} .hero-title{font-family:var(--font-display);font-size:var(--hero-title-fs);line-height:var(--hero-title-lh);letter-spacing:var(--hero-title-ls);color:var(--hero-text-color);text-align:center;margin:0} .hero-text p{margin:var(--hero-body-gap) 0} .hero-subtitle,.hero-date,.hero-location,.hero-countdown{font-family:var(--font-body);color:var(--hero-text-color);text-align:center;margin:0} .hero-subtitle{font-size:var(--hero-subtitle-fs);font-weight:var(--weight-medium)} .hero-date,.hero-location{font-family:var(--font-body-i);font-size:var(--hero-meta-fs);font-variant-numeric:var(--font-numeric)} .hero-countdown{font-family:var(--font-body-i);font-size:var(--hero-countdown-fs);font-variant-numeric:var(--font-numeric)} .chevron-scroll{position:absolute;left:50%;bottom:var(--hero-chev-bottom);transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--hero-chev-gap);opacity:var(--hero-chev-opacity);color:var(--hero-chev-color);text-decoration:none} .chevron{width:var(--hero-chev-size);height:var(--hero-chev-size);border-right:var(--hero-chev-stroke) solid currentColor;border-bottom:var(--hero-chev-stroke) solid currentColor;transform:rotate(45deg);animation:chevronBounce var(--hero-chev-bounce-dur) infinite ease-in-out} @keyframes chevronBounce{0%,100%{transform:translateY(0) rotate(45deg);opacity:var(--opacity-full)}50%{transform:translateY(var(--hero-chev-bounce-distance)) rotate(45deg);opacity:var(--opacity-half)}} .welcome-card{background:var(--color-surface);border:1px solid var(--border-muted);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:clamp(var(--space-md),3vw,var(--space-xl)) clamp(var(--space-lg),5vw,var(--space-2xl));margin-block:clamp(var(--space-lg),4vw,var(--space-2xl));max-inline-size:min(48rem,92%);text-align:center;transition:var(--transition-elevate)} .welcome-card:hover{transform:var(--hover-move);box-shadow:var(--shadow-md)} /* ===== Home ยท Photo strip ===== */ [data-page="home"] .media-strip.enhanced{position:relative;inline-size:100vw;max-inline-size:100vw;margin-inline:calc(50% - 50vw);background:var(--media-strip-bg);padding:clamp(0rem,1.5vw,var(--space-sm)) 0} [data-page="home"] .media-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain;scroll-padding-inline:clamp(var(--space-sm),3vw,var(--space-xl))} [data-page="home"] .media-track::-webkit-scrollbar{display:none} [data-page="home"] .media-strip.enhanced::before,[data-page="home"] .media-strip.enhanced::after{content:"";position:absolute;inset-block:0;inline-size:clamp(1.5rem,6vw,4rem);pointer-events:none;z-index:1} [data-page="home"] .media-strip.enhanced::before{left:0;background:linear-gradient(90deg,var(--media-strip-bg) 35%,transparent)} [data-page="home"] .media-strip.enhanced::after{right:0;background:linear-gradient(270deg,var(--media-strip-bg) 35%,transparent)} [data-page="home"] .media-grid{display:inline-flex;gap:clamp(var(--space-xs),2vw,var(--space-sm));padding-inline:clamp(var(--space-sm),3vw,var(--space-xl))} [data-page="home"] .media-item{flex:0 0 auto;inline-size:clamp(14rem,36vw,22rem);aspect-ratio:var(--media-strip-aspect);border-radius:var(--media-strip-img-radius);background:var(--media-bg);box-shadow:var(--media-shadow);overflow:hidden;scroll-snap-align:center} [data-page="home"] .media-item>img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none} [data-page="home"] .media-item[data-caption]:after{content:attr(data-caption);display:block;font:inherit;font-size:var(--step-0);color:var(--color-text-muted);text-align:center;padding-block:.4rem .1rem} [data-page="home"] .media-arrow{position:absolute;top:50%;transform:translateY(-50%);inline-size:clamp(2rem,4vw,2.75rem);block-size:clamp(2rem,4vw,2.75rem);border-radius:50%;border:var(--btn-ghost-border);background:var(--btn-ghost-bg);box-shadow:var(--btn-shadow);display:grid;place-items:center;font-size:clamp(1.2rem,3.2vw,1.5rem);color:var(--btn-ghost-color);opacity:.92;z-index:2;backdrop-filter:saturate(118%);transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease} [data-page="home"] .media-arrow:hover{transform:translateY(calc(-50% - 1px));opacity:1;background:var(--btn-ghost-bg-hover);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 42%);box-shadow:var(--btn-shadow-hover)} [data-page="home"] .media-arrow:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-shadow)} [data-page="home"] .media-prev{left:clamp(.25rem,1vw,.75rem)} [data-page="home"] .media-next{right:clamp(.25rem,1vw,.75rem)} [data-page="home"] .media-item:hover{transform:none} /* ===== Container queries ===== */ @container home (max-width:56.25em){[data-page="home"]{--hero-overlay-pad-y:var(--space-md);--hero-overlay-pad-x:var(--space-lg);--hero-overlay-max:40rem;--hero-title-fs:var(--step-5);--hero-title-lh:1.18;--hero-subtitle-fs:var(--step-3);--hero-meta-fs:var(--step-2);--hero-countdown-fs:var(--step-1);--hero-chev-size:1.1rem;--hero-chev-bottom:1rem;--hero-h:min(100svh,48rem);--hero-overlay-inline:min(92%,var(--hero-overlay-max));--hero-overlay-bg:color-mix(in oklab,var(--overlay-strong) 58%,transparent);--hero-body-gap:var(--space-3xs)}.welcome-card{padding:var(--space-lg) var(--space-xl)}.welcome-title{font-size:var(--step-4)}.chevron-scroll{display:none}} @container home (max-width:48em){[data-page="home"]{--ess-label-col:5.25rem}} @container home (max-width:37.5em){[data-page="home"]{--hero-overlay-pad-y:var(--space-sm);--hero-overlay-pad-x:var(--space-sm);--hero-overlay-max:92vw;--hero-title-fs:clamp(1.7rem,8vw,2.1rem);--hero-subtitle-fs:var(--step-2);--hero-meta-fs:var(--step-3);--hero-countdown-fs:.95rem;--hero-h:min(100svh,42rem);--hero-overlay-bg:color-mix(in oklab,var(--overlay-strong) 62%,transparent)}} @media (prefers-reduced-motion:reduce){.chevron{animation:none}[data-page="home"] .media-arrow{transition:none}.gate-overlay{backdrop-filter:none}} /* ================================================ ๐Ÿ  Home ยท Cohesive Welcome + Essentials (updated to match framed card style) =================================================== */ .home-intro{ inline-size:var(--inline-lg); margin-inline:auto; } .home-intro-grid{ display:grid; grid-template-columns:1fr; gap:clamp(var(--space-md),3vw,var(--space-xl)); align-items:start; justify-items:center; /* โœ… center cards in their columns */ } /* Shared home cards โ€“ let .is-framed + global card tokens handle borders */ .home-card{ position:relative; background:var(--card-bg); box-shadow:var(--card-shadow); padding:clamp(var(--space-md),3vw,var(--space-2xl)); margin-block:clamp(var(--space-lg),4vw,var(--space-2xl)); margin-inline:auto; /* โœ… center the box */ max-inline-size:min(48rem,92%); text-align:center; transition:var(--transition-elevate); } .home-card:hover{ transform:var(--hover-move); box-shadow:var(--shadow-md); } /* Welcome typography stays the same */ .home-welcome .welcome-title{ margin:0 0 var(--space-sm); font-family:var(--font-display); font-size:var(--step-5); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--color-text); position:relative; } .home-welcome .welcome-text{ margin:var(--space-sm) 0 0; margin-inline:auto; /* โœ… center the text block */ max-inline-size:54ch; font-family:var(--font-body); font-size:var(--step-2); line-height:var(--lh-normal); color:var(--color-text-muted); } /* (Quick links kept here in case you re-enable them later) */ .quick-links{ display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:clamp(var(--space-sm),2vw,var(--space-lg)); } .quick-links .button{ --button-pad-y:.5rem; --button-pad-x:.9rem; } .quick-links .button--ghost{ background:transparent; border:1px solid var(--border-muted); } /* Essentials card: use same card/frame system as details page */ .event-info.compact{ /* Use the global event-info + .is-framed styling for border & radius */ background:var(--card-bg); padding:var(--card-pad-y) var(--card-pad-x); } .event-info.compact .event-info-title{ margin:0 0 var(--space-sm); font-family:var(--font-display); font-size:var(--step-4); line-height:var(--lh-tight); letter-spacing:var(--ls-subtle); } .event-info.compact .event-info-row{ display:grid; grid-template-columns:max(6rem,var(--ess-label-col,7rem)) 1fr; gap:var(--space-xs); padding-block:.4rem; border-top:1px dashed color-mix(in oklab,var(--border-muted),transparent 20%); } .event-info.compact .event-info-row:first-of-type{ border-top:none; } .event-info.compact .event-info-label-text{ font-family:var(--font-body-i); font-size:var(--step-0); color:var(--color-text-muted); text-transform:none; } .event-info.compact .event-info-value{ font-family:var(--font-body); font-size:var(--step-1); color:var(--color-text); } .event-info.compact .rsvp-row .button{ margin-inline-start:var(--space-sm); } .event-info.compact a{ text-underline-offset:.15em; text-decoration-thickness:.08em; } /* Layout tweaks on wider screens */ @container home (min-width:56.25em){ .home-intro-grid{ grid-template-columns:1.1fr .9fr; align-items:stretch; } } /* Narrow screens: tighten label column like details page */ @container home (max-width:37.5em){ .event-info.compact .event-info-row{ grid-template-columns:max(5.25rem,var(--ess-label-col,5.25rem)) 1fr; } } /* ================================================ ๐Ÿชฉ Home Gate (full-screen entry) ================================================ */ [data-page="home"]{--gate-h:min(100svh,56rem);--gate-bg:var(--hero-bg);--gate-text-color:var(--color-surface);--gate-overlay-bg:color-mix(in oklab,var(--overlay-strong) 52%,transparent);--gate-overlay-blur:.15rem;--gate-title-fs:clamp(2rem,6vw,3.25rem);--gate-subtitle-fs:clamp(1.1rem,3.2vw,1.4rem);--gate-countdown-fs:clamp(1rem,2.6vw,1.2rem)} :root[data-gate-state="open"] header,:root[data-gate-state="open"] .site-header,:root[data-gate-state="open"] nav.primary-nav,:root[data-gate-state="open"] footer{visibility:hidden;opacity:0;pointer-events:none} :root[data-gate-state="open"],:root[data-gate-state="open"] body{overflow:hidden !important;height:100svh} :root[data-gate-state="open"] #home-content{visibility:hidden} :root[data-gate-state="entered"] #home-content{visibility:visible;animation:homeReveal .25s ease-out} :root[data-gate-state="entered"] #home-gate{display:none} #home-gate{position:fixed !important;inset:0 !important;z-index:9999;inline-size:100%;min-block-size:var(--gate-h);background:var(--gate-bg);background-size:cover;background-position:center;display:grid;place-items:center;overflow:hidden} #home-gate::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 60%,transparent 0 70%,rgba(0,0,0,.28));pointer-events:none} .gate-overlay{position:relative;z-index:var(--z-modal);background:var(--gate-overlay-bg);backdrop-filter:blur(var(--gate-overlay-blur));color:var(--gate-text-color);text-align:center;padding:clamp(var(--space-md),3vw,var(--space-xl)) clamp(var(--space-lg),5vw,var(--space-2xl));border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);inline-size:min(70ch,92vw)} .gate-title{font-family:var(--font-display);font-size:var(--gate-title-fs);line-height:var(--lh-tight);letter-spacing:var(--ls-subtle);margin:0 0 var(--space-2xs)} .gate-subtitle{font-family:var(--font-body);font-size:var(--gate-subtitle-fs);margin:0 0 var(--space-xs)} .gate-countdown{font-family:var(--font-body-i);font-size:var(--gate-countdown-fs);font-variant-numeric:var(--font-numeric);margin:0 0 var(--space-sm)} .gate-enter{margin-top:var(--space-sm);padding-inline:clamp(1rem,2.8vw,1.5rem);padding-block:.7rem;border-radius:var(--radius-lg)} .home-mini-photos{inline-size:var(--inline-lg);margin-inline:auto} .mini-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--space-sm);align-items:start} .mini-photos figure{background:var(--color-surface);border:1px solid var(--border-muted);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:clip;margin:0} .mini-photos img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover} .mini-photos figcaption{font-size:var(--step-0);color:var(--color-text-muted);text-align:center;padding:.4rem .6rem .6rem} @keyframes homeReveal{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}} /* ================================================ Home Refresh Overrides ================================================ */ [data-page="home"]{ --gate-overlay-bg:color-mix(in oklab,var(--overlay-strong) 48%,transparent); --gate-overlay-blur:.2rem; } #home-content{ display:grid; gap:clamp(2rem,1.4rem + 2vw,3.5rem); padding-block:clamp(1.2rem,.8rem + 1vw,2.3rem) clamp(2.4rem,1.4rem + 2vw,4rem); } .home-intro, .home-guide, .home-mini-photos{ inline-size:var(--inline-lg); margin-inline:auto; } .home-intro-grid{ align-items:stretch; justify-items:stretch; } .home-overview{ padding:clamp(var(--space-md),2.2vw,var(--space-xl)); } .home-tldr-stack{ display:grid; gap:clamp(var(--space-lg),2.2vw,var(--space-xl)); } .home-overview-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr); grid-template-areas: "copy essentials" "dashboard essentials"; gap:clamp(.85rem,.6rem + 1vw,1.4rem); align-items:start; } .home-overview-copy{ grid-area:copy; display:grid; gap:var(--space-xs); align-content:start; justify-items:start; max-inline-size:none; padding-top:var(--space-2xs); } .home-overview-copy > *{ margin:0; } .home-overview-grid .home-tldr-personal{ grid-area:dashboard; align-self:start; } .home-overview-meta{ margin:0; font-family:var(--font-body-i); font-size:var(--step-2); color:var(--color-text-muted); } .home-overview-essentials{ grid-area:essentials; align-self:stretch; border:1px solid color-mix(in oklab,var(--border-muted),transparent 8%); border-radius:var(--radius-xl); box-shadow:none; } .home-card, .home-spotlight-grid{ position:relative; background: radial-gradient(circle at top right,rgba(214,168,158,.14),transparent 35%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,242,235,.92)); box-shadow:0 18px 42px rgba(62,52,35,.09); } .home-card{ display:grid; gap:var(--space-sm); padding:clamp(var(--space-lg),3vw,var(--space-2xl)); min-block-size:100%; max-inline-size:none; margin:0; text-align:left; } .home-card.home-overview{ gap:0; padding:clamp(var(--space-md),2.2vw,var(--space-xl)); } .home-tldr-personal, .home-tldr-links{ inline-size:100%; margin:0; padding-top:clamp(var(--space-md),1.8vw,var(--space-lg)); border-top:1px solid rgba(184,154,134,.18); } .home-tldr-panel{ display:grid; gap:var(--space-md); padding:0; } .home-tldr-links-head{ display:grid; gap:var(--space-2xs); justify-items:start; text-align:left; margin-bottom:var(--space-sm); } .home-tldr-party{ margin:0; font-family:var(--font-body); font-size:var(--step-2); font-weight:var(--weight-bold); line-height:1.3; color:var(--color-text); } .home-link-card:hover, .mini-photos figure:hover{ transform:translateY(-2px); box-shadow:0 22px 42px rgba(62,52,35,.12); } .home-eyebrow, .home-section-kicker, .home-link-card__eyebrow{ margin:0; font-size:var(--step-1); font-weight:var(--weight-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); } .home-welcome .welcome-title, .home-section-title{ margin:0; font-family:var(--font-display); color:var(--color-text); line-height:1.05; } .home-welcome .welcome-title{ font-size:var(--type-hero-title-fs); } .home-section-title{ font-size:var(--type-section-title-fs); } .home-welcome .welcome-text, .home-section-copy{ margin:0; max-inline-size:58ch; font-size:var(--type-body-fs); line-height:var(--lh-comfy); color:var(--color-text-muted); } .home-overview .welcome-text{ max-inline-size:none; line-height:1.36; } .home-pill-row{ display:flex; flex-wrap:wrap; gap:var(--space-xs); } .home-actions{ display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; } .home-actions--center{ justify-content:center; margin-top:var(--space-sm); } .home-note{ margin:0; max-inline-size:54ch; color:var(--color-text); font-size:var(--type-body-sm-fs); line-height:1.46; } .home-note[hidden]{ display:none!important; } .home-section-head{ display:grid; gap:var(--space-2xs); justify-items:center; text-align:center; max-inline-size:42rem; margin:0 auto var(--space-lg); } .home-guide-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap:var(--space-sm); } .home-tldr-links .home-guide-grid{ grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); } .home-tldr-links .home-link-card{ background:var(--card-bg-muted); grid-template-columns:1fr; gap:var(--space-2xs); padding:var(--space-sm) var(--space-md); min-block-size:auto; align-items:start; } .home-tldr-links .home-link-card__eyebrow{ grid-column:auto; } .home-tldr-links .home-link-card__title{ font-family:var(--font-body); font-size:var(--step-2); font-weight:var(--weight-bold); line-height:1.22; text-wrap:balance; } .home-tldr-links .home-link-card__text{ display:none; } .home-tldr-links .home-link-card__meta{ justify-self:end; align-self:start; font-size:var(--step-0); margin-top:var(--space-2xs); white-space:nowrap; } @container home (min-width:72em){ .home-tldr-links .home-guide-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @container home (max-width:48em){ .home-tldr-links .home-link-card{ justify-items:start; } .home-tldr-links .home-link-card__meta{ justify-self:start; align-self:start; } } .home-dashboard{ display:grid; gap:var(--space-lg); } .home-dashboard-head{ margin-bottom:0; } .home-dashboard-shell{ display:grid; gap:var(--space-md); align-items:start; } .home-dashboard-summary{ display:grid; gap:var(--space-md); padding:clamp(var(--space-md),2.8vw,var(--space-xl)); align-content:start; } .home-dashboard-summary.home-tldr-panel{ padding:0; background:transparent; box-shadow:none; backdrop-filter:none; } .home-dashboard-summary-head{ display:grid; gap:var(--space-xs); } .home-dashboard-party{ margin:0; font-family:var(--font-display); font-size:var(--type-section-title-fs); line-height:1.05; color:var(--color-text); } .home-dashboard-copy{ margin:0; color:var(--color-text-muted); font-size:var(--type-body-sm-fs); line-height:var(--lh-comfy); } .home-dashboard-stat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); } .home-dashboard-stat{ display:grid; gap:.2rem; padding:var(--space-sm); border:var(--card-border); border-radius:var(--card-radius); background:var(--card-bg-muted); } .home-dashboard-stat__label{ font-size:var(--step-0); font-weight:var(--weight-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); } .home-dashboard-stat__value{ color:var(--color-text); font-size:var(--step-2); font-weight:var(--weight-bold); line-height:var(--lh-tight); } .home-dashboard-guest-block{ display:grid; gap:var(--space-xs); } .home-dashboard-name-list{ display:flex; flex-wrap:wrap; gap:var(--space-xs); } .home-dashboard-name{ display:inline-flex; align-items:center; padding:.42rem .85rem; border-radius:var(--chip-radius); background:var(--chip-filled-bg); border:var(--chip-outline-border); color:var(--color-text); box-shadow:var(--chip-shadow); font-size:var(--step-1); font-weight:var(--weight-bold); } .home-dashboard-note{ padding:var(--space-sm) var(--space-md); border:var(--card-border); border-radius:var(--card-radius); background:var(--card-bg-muted); color:var(--color-text); font-size:var(--type-body-sm-fs); line-height:var(--lh-comfy); } .home-dashboard-actions{ display:flex; flex-wrap:wrap; gap:var(--space-xs); } .home-live-menu-launchers{ display:flex; flex-wrap:wrap; gap:var(--space-xs); } .home-live-menu-launchers[hidden]{ display:none!important; } .home-live-menu-launchers .button{ min-inline-size:clamp(9.5rem,15vw,11.5rem); min-block-size:2.7rem; padding:.68rem 1rem; border-radius:.2rem; background:rgba(255,255,255,.9); box-shadow:none; font-family:var(--font-body); font-size:var(--step-0); letter-spacing:.15em; text-transform:uppercase; } .home-dashboard-event-stack{ display:grid; gap:var(--space-xs); } .home-dashboard-event-list{ display:grid; gap:var(--space-sm); } .home-dashboard-date-group{ display:grid; gap:.15rem; } .home-dashboard-date-group + .home-dashboard-date-group{ padding-top:var(--space-sm); border-top:1px solid rgba(184,154,134,.22); } .home-dashboard-date-title{ margin:0; font-family:var(--font-body); font-size:var(--step-1); font-weight:var(--weight-bold); letter-spacing:.03em; line-height:1.35; color:var(--color-text); } .home-dashboard-date-list{ display:grid; gap:0; } .home-dashboard-event-item, .home-dashboard-empty{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; align-content:start; padding:.55rem 0; align-items:end; } .home-dashboard-event-item + .home-dashboard-event-item{ border-top:1px dashed rgba(184,154,134,.28); } .home-dashboard-event-item-head{ display:grid; gap:.05rem; min-inline-size:0; } .home-dashboard-event-item .dashboard-event-card__eyebrow{ margin:0; font-size:.72rem; font-weight:var(--weight-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); } .home-dashboard-event-item .dashboard-event-card__title{ margin:0; font-family:var(--font-body); font-size:var(--step-1); font-weight:var(--weight-bold); letter-spacing:.01em; line-height:1.2; color:var(--color-text); } .home-dashboard-event-meta{ margin:0; color:var(--color-text-muted); font-size:var(--step-0); line-height:1.35; } .home-dashboard-empty p{ margin:0; color:var(--color-text-muted); font-size:var(--type-body-sm-fs); line-height:var(--lh-comfy); } .home-dashboard-empty{ grid-template-columns:1fr; gap:.35rem; align-items:start; padding:var(--space-sm) var(--space-md); border:var(--card-border); border-radius:var(--card-radius); background:var(--card-bg-muted); } .home-dashboard-event-link{ justify-self:start; font-size:var(--step-0); font-weight:var(--weight-bold); color:var(--color-accent); text-decoration:none; white-space:nowrap; } .home-dashboard-event-link:hover{ color:var(--color-accent); text-decoration:underline; } .home-dashboard-event-links{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; align-items:center; align-self:center; } .home-dashboard-event-children{ display:grid; gap:.35rem; margin-top:.25rem; padding:.15rem 0 .1rem .95rem; border-left:2px solid rgba(184,154,134,.18); grid-column:1 / -1; } .home-dashboard-event-children-label{ margin:0; font-family:var(--font-body-i); font-size:var(--type-body-sm-fs); line-height:1.4; color:var(--color-text-muted); } .home-dashboard-event-children-list{ display:grid; gap:0; } .home-dashboard-event-subitem{ display:grid; gap:.28rem; padding:.45rem 0; } .home-dashboard-event-subitem + .home-dashboard-event-subitem{ border-top:1px dashed rgba(184,154,134,.18); } .home-dashboard-event-subitem-head{ display:grid; gap:.05rem; } .home-dashboard-event-subitem .dashboard-event-card__eyebrow{ margin:0; font-size:.78rem; font-weight:var(--weight-bold); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); } .home-dashboard-event-subitem-title{ margin:0; font-family:var(--font-body); font-size:var(--step-0); font-weight:var(--weight-bold); line-height:1.3; color:var(--color-text); } @container home (max-width:48em){ .home-dashboard-event-item, .home-dashboard-empty{ grid-template-columns:1fr; gap:.28rem; align-items:start; } .home-dashboard-event-links{ justify-content:flex-start; } } .home-dashboard-empty h3{ margin:0; font-family:var(--font-display); font-size:var(--type-card-title-fs); line-height:var(--lh-tight); color:var(--color-text); } .home-live{ display:grid; gap:var(--space-lg); } .home-live-head{ margin-bottom:0; } .home-live-shell{ display:grid; gap:var(--space-md); } .home-live-status, .home-live-panel, .home-live-timeline{ display:grid; gap:var(--space-sm); padding:clamp(var(--space-md),2.8vw,var(--space-xl)); } .home-live-status{ background: radial-gradient(circle at top right,rgba(214,168,158,.18),transparent 34%), linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,242,235,.92)); } .home-live-status-head, .home-live-timeline-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); flex-wrap:wrap; } .home-live-panel-head{ display:grid; gap:var(--space-2xs); } .home-live-status-refresh{ margin:0; color:var(--color-text-muted); font-size:var(--step-0); font-family:var(--font-body-i); } .home-live-status-time, .home-live-panel-time, .home-live-schedule-time{ margin:0; color:var(--color-text); font-size:var(--step-1); font-family:var(--font-body-i); } .home-live-grid{ display:grid; grid-template-columns:minmax(18rem,.84fr) minmax(24rem,1.16fr); gap:var(--space-md); align-items:start; } .home-live-panel--next{ align-content:start; } .home-live-next-list{ display:grid; gap:var(--space-xs); } .home-live-panel--map{ align-self:start; align-content:start; min-inline-size:0; padding:clamp(.55rem,1.6vw,.85rem); overflow:hidden; background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,242,235,.94)); } .home-venue-map-shell{ display:grid; min-inline-size:0; } .home-venue-map-scene{ position:relative; --map-hit-left-nudge:8%; --map-hit-top-nudge:2%; --map-entry-x:48.9%; --map-entry-y:35.75%; --map-entry-w:6.6%; --map-entry-h:10%; --map-bar-x:48.75%; --map-bar-y:22.9%; --map-bar-w:13.8%; --map-bar-h:10%; --map-bridal-wing-x:65.4%; --map-bridal-wing-y:23%; --map-bridal-wing-w:11.3%; --map-bridal-wing-h:10%; --map-library-x:58.35%; --map-library-y:35.8%; --map-library-w:6.8%; --map-library-h:10.1%; --map-great-hall-x:49.35%; --map-great-hall-y:47.5%; --map-great-hall-w:19%; --map-great-hall-h:17%; --map-patio-upper-x:67.35%; --map-patio-upper-y:36.4%; --map-patio-upper-w:9.8%; --map-patio-upper-h:30.5%; --map-patio-lower-x:66.4%; --map-patio-lower-y:68.65%; --map-patio-lower-w:10.8%; --map-patio-lower-h:8.5%; --map-fountain-x:81.2%; --map-fountain-y:58.9%; --map-fountain-w:13.4%; --map-fountain-h:13.8%; --map-ceremony-x:80.85%; --map-ceremony-y:18.45%; --map-ceremony-w:14%; --map-ceremony-h:28.5%; inline-size:100%; max-inline-size:100%; min-block-size:22rem; aspect-ratio:1012 / 702; border-radius:calc(var(--radius-xl) + .1rem); border:1px solid color-mix(in oklab,var(--border-muted),transparent 2%); overflow:hidden; background:#e6d9c3; box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 1rem 2rem rgba(62,52,35,.1); isolation:isolate; } .home-venue-map-expand{ position:absolute; top:.85rem; right:.85rem; z-index:5; min-block-size:auto; padding:.44rem .82rem; border-radius:999px; background:rgba(255,253,249,.84); backdrop-filter:blur(.35rem); box-shadow:0 .5rem 1rem rgba(62,52,35,.12); font-size:var(--step-0); letter-spacing:.12em; text-transform:uppercase; } .home-venue-map-expand:hover, .home-venue-map-expand:focus-visible{ background:rgba(255,250,242,.94); } .home-venue-map-scene::before{ content:""; position:absolute; inset:.5rem; border:1px solid color-mix(in oklab,var(--color-accent),transparent 48%); border-radius:calc(var(--radius-xl) - .25rem); pointer-events:none; opacity:.5; z-index:1; } .home-venue-map-scene::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 18% 12%,rgba(255,255,255,.18),transparent 18%), linear-gradient(180deg,rgba(255,255,255,.05),rgba(90,69,42,.08)); pointer-events:none; z-index:1; } .home-venue-map-art{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:center; z-index:0; } .home-venue-map-pin{ position:absolute; inset:auto auto auto auto; appearance:none; display:block; padding:0; border:0; background:transparent; box-shadow:none; cursor:pointer; touch-action:manipulation; z-index:3; -webkit-tap-highlight-color:transparent; } .home-venue-map-pin::before{ content:""; position:absolute; inset:-.18rem; border-radius:.95rem; border:1px solid transparent; background:transparent; box-shadow:none; transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-mid) var(--ease-standard); } .home-venue-map-pin::after{ display:none; } .home-venue-map-pin:hover, .home-venue-map-pin:focus-visible{ outline:none; } .home-venue-map-pin:hover::before, .home-venue-map-pin:focus-visible::before{ border-color:color-mix(in oklab,var(--color-accent),transparent 42%); background:transparent; box-shadow:0 0 0 .18rem color-mix(in oklab,var(--color-accent),transparent 86%); } .home-venue-map-pin.is-active, .home-venue-map-pin[aria-pressed="true"]{ outline:none; } .home-venue-map-pin.is-active::before, .home-venue-map-pin[aria-pressed="true"]::before{ border-color:color-mix(in oklab,var(--color-action),transparent 36%); background:transparent; box-shadow:0 0 0 .24rem color-mix(in oklab,var(--color-action),transparent 82%); } .home-venue-map-pin__number{ display:none; } :root[data-debug-map="1"] .home-venue-map-pin{ z-index:4; } :root[data-debug-map="1"] .home-venue-map-pin::before{ inset:0; border-width:2px; border-color:rgba(210,44,36,.92); background:rgba(210,44,36,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.66); } :root[data-debug-map="1"] .home-venue-map-pin::after{ content:attr(data-debug-label); display:inline-flex; position:absolute; left:0; bottom:calc(100% + .22rem); padding:.18rem .42rem; border:1px solid rgba(210,44,36,.38); border-radius:999px; background:rgba(255,251,247,.96); color:#6a2419; box-shadow:0 .3rem .8rem rgba(62,52,35,.14); font-family:var(--font-body); font-size:.7rem; font-weight:var(--weight-bold); letter-spacing:.04em; white-space:nowrap; pointer-events:none; } .home-venue-map-pin--entry{ inset:calc(var(--map-entry-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-entry-x) - var(--map-hit-left-nudge)); inline-size:var(--map-entry-w); block-size:var(--map-entry-h); } .home-venue-map-pin--bar{ inset:calc(var(--map-bar-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-bar-x) - var(--map-hit-left-nudge)); inline-size:var(--map-bar-w); block-size:var(--map-bar-h); } .home-venue-map-pin--bridal-wing{ inset:calc(var(--map-bridal-wing-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-bridal-wing-x) - var(--map-hit-left-nudge)); inline-size:var(--map-bridal-wing-w); block-size:var(--map-bridal-wing-h); } .home-venue-map-pin--library{ inset:calc(var(--map-library-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-library-x) - var(--map-hit-left-nudge)); inline-size:var(--map-library-w); block-size:var(--map-library-h); } .home-venue-map-pin--great-hall{ inset:calc(var(--map-great-hall-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-great-hall-x) - var(--map-hit-left-nudge)); inline-size:var(--map-great-hall-w); block-size:var(--map-great-hall-h); } .home-venue-map-pin--patio-upper{ inset:calc(var(--map-patio-upper-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-patio-upper-x) - var(--map-hit-left-nudge)); inline-size:var(--map-patio-upper-w); block-size:var(--map-patio-upper-h); } .home-venue-map-pin--patio-lower{ inset:calc(var(--map-patio-lower-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-patio-lower-x) - var(--map-hit-left-nudge)); inline-size:var(--map-patio-lower-w); block-size:var(--map-patio-lower-h); } .home-venue-map-pin--fountain{ inset:calc(var(--map-fountain-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-fountain-x) - var(--map-hit-left-nudge)); inline-size:var(--map-fountain-w); block-size:var(--map-fountain-h); } .home-venue-map-pin--ceremony{ inset:calc(var(--map-ceremony-y) - var(--map-hit-top-nudge)) auto auto calc(var(--map-ceremony-x) - var(--map-hit-left-nudge)); inline-size:var(--map-ceremony-w); block-size:var(--map-ceremony-h); } .home-venue-map-detail{ position:absolute; inset:auto .9rem .9rem .9rem; display:grid; gap:.42rem; padding:.95rem 1rem 1rem; border:1px solid color-mix(in oklab,var(--border-muted),transparent 4%); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,237,225,.88)); backdrop-filter:blur(.55rem); box-shadow:0 .75rem 1.35rem rgba(62,52,35,.12); max-inline-size:min(22rem,calc(100% - 1.8rem)); z-index:4; } .home-venue-map-detail--overlay{ max-inline-size:min(25rem,calc(100% - 2rem)); } .home-venue-map-detail__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-xs); flex-wrap:wrap; } .home-venue-map-detail__time{ margin:0; font-family:var(--font-body-i); font-size:var(--step-1); color:var(--color-text-muted); } .home-venue-map-detail__copy{ margin:0; color:var(--color-text-muted); font-size:var(--step-1); line-height:var(--lh-comfy); } .home-venue-map-detail__actions{ display:flex; flex-wrap:wrap; gap:.85rem; } .home-venue-map-detail__actions a{ font-size:var(--step-1); font-weight:var(--weight-bold); } @keyframes home-venue-map-pulse{ 0%,100%{transform:scale(1);opacity:.72} 50%{transform:scale(1.08);opacity:.36} } .home-live-checklist{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none; } .home-live-checklist li{ position:relative; padding-left:1.15rem; color:var(--color-text-muted); line-height:var(--lh-comfy); } .home-live-checklist li::before{ content:""; position:absolute; inset-block-start:.55rem; inset-inline-start:0; inline-size:.45rem; block-size:.45rem; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 .16rem color-mix(in oklab,var(--color-accent),transparent 78%); } .home-live-timeline-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)); gap:var(--space-sm); } .home-live-schedule-card{ position:relative; display:grid; align-content:start; gap:var(--space-2xs); min-block-size:100%; padding:clamp(.95rem,.82rem + .4vw,1.15rem) clamp(1rem,.86rem + .45vw,1.2rem); padding-right:calc(clamp(1rem,.86rem + .45vw,1.2rem) + 3.55rem); background:var(--card-bg); overflow:hidden; isolation:isolate; transition:var(--transition-color),var(--transition-elevate),transform var(--dur-mid) var(--ease-standard); } .home-live-schedule-card:hover{ transform:translateY(-1px); background:var(--card-bg-muted); box-shadow:var(--card-shadow-hover),var(--card-sheen); } .home-live-schedule-card img{ position:absolute; top:clamp(.95rem,.82rem + .4vw,1.15rem); right:clamp(1rem,.86rem + .45vw,1.2rem); inline-size:2.8rem; block-size:2.8rem; border-radius:var(--radius-pill); background:color-mix(in oklab,var(--color-surface-muted),white 18%); padding:var(--space-2xs); box-shadow:var(--shadow-md); z-index:1; } .home-live-schedule-card[data-state="now"]{ background:color-mix(in oklab,var(--card-bg),var(--color-action) 12%); } .home-live-schedule-card[data-state="next"]{ background:color-mix(in oklab,var(--card-bg),var(--color-accent) 11%); } .home-live-schedule-card[data-state="done"]{ opacity:.84; } .home-live-schedule-card--compact{ gap:.35rem; } .home-live-schedule-card--compact .home-live-schedule-copy{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .home-live-schedule-badge{ justify-self:start; margin:0; padding:.22rem .55rem; border-radius:999px; border:1px solid color-mix(in oklab,var(--color-accent),transparent 60%); background:color-mix(in oklab,var(--color-surface),white 35%); color:var(--color-text-muted); font-size:.74rem; font-weight:var(--weight-bold); letter-spacing:.12em; line-height:1; text-transform:uppercase; } .home-live-schedule-card[data-state="now"] .home-live-schedule-badge{ border-color:color-mix(in oklab,var(--color-action),transparent 52%); background:color-mix(in oklab,var(--color-action),white 82%); color:color-mix(in oklab,var(--color-action),black 12%); } .home-live-schedule-card[data-state="next"] .home-live-schedule-badge{ border-color:color-mix(in oklab,var(--color-accent),transparent 48%); background:color-mix(in oklab,var(--color-accent),white 84%); color:color-mix(in oklab,var(--color-accent),black 15%); } .home-live-schedule-card[data-state="done"] .home-live-schedule-badge{ border-color:color-mix(in oklab,var(--color-text-muted),transparent 68%); color:var(--color-text-muted); } .home-live-schedule-kicker{ margin:0; font-size:var(--step-0); font-weight:var(--weight-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); } .home-live-schedule-time{ max-inline-size:18ch; } .home-live-schedule-title{ margin:0; max-inline-size:18ch; } .home-live-schedule-copy{ margin:0; color:var(--color-text-muted); font-size:var(--type-body-sm-fs); line-height:1.46; } .home-link-card{ display:grid; gap:var(--space-xs); align-content:start; min-block-size:100%; padding:clamp(var(--space-md),2.2vw,var(--space-lg)); text-decoration:none !important; color:inherit !important; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,242,235,.9)); transition:var(--transition-elevate),var(--transition-color); } .home-link-card__title{ margin:0; font-family:var(--font-display); font-size:var(--step-4); line-height:1.08; color:var(--color-text); } .home-link-card__text{ margin:0; color:var(--color-text-muted); line-height:var(--lh-comfy); } .home-link-card__meta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; font-weight:var(--weight-bold); color:var(--color-accent); } .home-link-card__meta::after{ content:"\2192"; font-size:1.05em; } .home-spotlight{ inline-size:min(92%,var(--container-lg)); margin-inline:auto; } .home-spotlight-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(18rem,.98fr); gap:clamp(var(--space-md),3vw,var(--space-xl)); padding:clamp(var(--space-md),2.5vw,var(--space-xl)); align-items:center; } .home-spotlight-media{ margin:0; overflow:hidden; border-radius:calc(var(--radius-xl) - .1rem); box-shadow:0 16px 36px rgba(62,52,35,.14); } .home-spotlight-media img{ inline-size:100%; block-size:100%; min-block-size:18rem; object-fit:cover; } .home-spotlight-copy{ display:grid; gap:var(--space-sm); align-content:start; } .event-info.compact{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,242,235,.92)); padding:var(--card-pad-y) var(--card-pad-x); } .event-info.compact .event-info-intro{ margin-bottom:var(--space-sm); } .event-info.compact .event-info-row{ padding-block:.5rem; border-top:1px dashed color-mix(in oklab,var(--border-muted),transparent 18%); } .home-overview-essentials .event-info-title{ margin-bottom:var(--space-xs); } .home-overview-essentials .event-info-row{ padding-block:.35rem; } .home-overview-essentials .event-info-subtext{ margin-top:.15rem; } .event-info.compact .event-actions{ margin-top:var(--space-sm); margin-bottom:0; } .event-info.compact .rsvp-row .button{ margin-inline-start:var(--space-xs); } .home-mini-photos .home-section-head{ margin-bottom:var(--space-md); } .mini-photos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-sm); } .mini-photos figure{ margin:0; overflow:hidden; border:1px solid var(--border-muted); border-radius:var(--radius-xl); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,242,235,.94)); box-shadow:var(--shadow-sm); transition:var(--transition-elevate); } .mini-photos img{ inline-size:100%; aspect-ratio:4 / 4.8; object-fit:cover; } .mini-photos figcaption{ padding:.8rem .9rem 1rem; text-align:center; color:var(--color-text-muted); font-size:var(--step-1); } @container home (min-width:56.25em){ .home-intro-grid{ grid-template-columns:1.1fr .9fr; } .home-dashboard-shell{ grid-template-columns:minmax(0,1fr); } } @container home (max-width:56.25em){ #home-content{ gap:clamp(1.6rem,1.2rem + 1.4vw,2.8rem); } .home-overview-grid, .home-spotlight-grid, .home-live-grid{ grid-template-columns:1fr; grid-template-areas:none; } .home-overview-copy, .home-overview-essentials, .home-overview-grid .home-tldr-personal{ grid-area:auto; } .home-overview-copy{ padding-top:0; } .home-tldr-links .home-guide-grid{ grid-template-columns:1fr; } .home-spotlight-media img{ min-block-size:15rem; } .mini-photos{ grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); } } [data-page="home"][data-wedding-day-live] .home-overview-grid{ grid-template-columns:1fr; } @container home (max-width:37.5em){ #home-content{ padding-block:1rem 2.5rem; } .home-card, .home-spotlight-grid, .home-dashboard-summary, .dashboard-event-card, .home-dashboard-empty, .home-live-status, .home-live-panel, .home-live-timeline, .home-live-timeline-item{ padding:var(--space-md); } .home-overview{ padding:var(--space-md); } .home-actions{ flex-direction:column; align-items:stretch; } .home-actions .button{ inline-size:100%; } .home-section-head{ justify-items:start; text-align:left; margin-inline:0; } .home-dashboard-stat-grid{ grid-template-columns:1fr; } .home-dashboard-actions{ flex-direction:column; align-items:stretch; } .home-dashboard-actions .button{ inline-size:100%; } .home-live-menu-launchers{ flex-direction:column; align-items:stretch; } .home-live-menu-launchers .button{ inline-size:100%; min-inline-size:0; } .home-live-status-head, .home-live-timeline-head{ align-items:flex-start; } .home-live-timeline-list{ grid-template-columns:1fr; } .home-venue-map-scene{ min-block-size:18.5rem; } .home-venue-map-pin::before{ inset:-.12rem; } .home-venue-map-detail{ inset:auto .6rem .6rem .6rem; max-inline-size:none; padding:.8rem .85rem .86rem; } .mini-photos{ grid-template-columns:1fr; } } /* ================================================ ๐Ÿ“– Story ================================================ */ [data-page="story"]{container-type:inline-size;container-name:story;--page-hero-max:52rem} [data-page="story"] .section{overflow:clip} [data-page="story"] .section .prose{font-size:var(--section-p-fs);line-height:var(--section-p-lh);margin-bottom:var(--section-p-mb);max-inline-size:var(--measure-default)} .story-section-head{display:grid;gap:.35rem;max-inline-size:42rem;margin:0 auto var(--space-md);text-align:center} .story-flow{background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface),var(--color-accent) 3%) 0%,var(--color-surface) 100%)} .story-block+.story-block{margin-top:var(--space-lg)} .story-block{display:grid;inline-size:min(100%,64rem);margin-inline:auto;gap:clamp(1.2rem,2.2vw,2rem);padding:clamp(1.15rem,1rem + 1vw,1.8rem);background:linear-gradient(180deg,var(--color-surface) 0%,color-mix(in oklab,var(--color-surface),var(--color-accent) 4%) 100%);box-shadow:0 8px 24px rgba(62,52,35,.05)} .story-block:nth-of-type(2n){background:linear-gradient(180deg,var(--color-surface) 0%,color-mix(in oklab,var(--color-surface),var(--color-action) 5%) 100%)} .story-block--media-right,.story-block--media-left{grid-template-columns:minmax(0,1.02fr) minmax(18rem,.98fr);align-items:center} .story-block--media-left{grid-template-columns:minmax(18rem,.98fr) minmax(0,1.02fr)} .story-block-copy{display:grid;gap:var(--space-2xs);align-content:center;max-inline-size:36rem;inline-size:100%} .story-block:not(.story-block--media-right):not(.story-block--media-left):not(.story-block--closing){justify-items:center} .story-block:not(.story-block--media-right):not(.story-block--media-left):not(.story-block--closing) .story-block-copy{justify-items:center;justify-self:center;text-align:center} .story-block-copy .prose:last-of-type{margin-bottom:0} .story-block-title{margin:0 0 var(--space-2xs);font-family:var(--font-display);font-size:var(--type-card-title-fs);line-height:var(--lh-tight);color:var(--color-text)} .story-block-figure{margin:0;inline-size:100%;max-inline-size:28rem;justify-self:center} .story-block-figure .media-item{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden} .story-block-figure img{inline-size:100%;aspect-ratio:1/1;object-fit:cover} .story-block--closing{max-inline-size:42rem;margin-inline:auto} .story-block--closing .story-block-copy{text-align:center} .story-closing-actions{display:flex;justify-content:center;margin-top:var(--space-md)} .story-signoff{margin:var(--space-lg) 0 0;font-family:var(--font-body-i);font-size:var(--step-3);line-height:1.4;color:var(--color-text)} @container story (max-width:68rem){.story-block{inline-size:min(100%,56rem)}.story-block--media-right,.story-block--media-left{grid-template-columns:1fr;justify-items:center}.story-block-copy{max-inline-size:38rem;justify-items:center;text-align:center}.story-block-figure{max-inline-size:24rem}} @container story (max-width:56.25em){.story-block--media-right,.story-block--media-left{grid-template-columns:1fr}.story-block-copy{max-inline-size:38rem;justify-items:center;text-align:center}.story-block-figure{max-inline-size:min(28rem,100%);margin-inline:auto}} @container story (max-width:37.5em){.story-flow{padding-block:var(--space-lg)}.story-block{padding:1rem;gap:var(--space-md)}.story-block-figure{max-inline-size:100%}.story-signoff{font-size:var(--step-2)}} /* ================================================ ๐ŸŽด Wedding Party (no-3D, reveal cards) ================================================ */ [data-page="party"]{ container-type:inline-size; container-name:party; --page-hero-max:50rem; --page-highlights-max:var(--party-max); --party-max: var(--container-md); --party-cols: 2; --party-min-col: 16rem; --party-gap: var(--space-lg); --party-auto-rows: auto; --party-card-maxw: 32.5rem; --card-ratio: 3/4; --party-card-radius: var(--radius-lg); --party-card-shadow: var(--shadow-lg); --party-front-row-gap: .25rem; --party-front-pad-b: .75rem; --party-name-fs: var(--step-3); --party-role-fs: var(--step-3); --party-bio-fs: var(--step-2); --party-back-title-fs: var(--step-5); --party-role-color: var(--color-text-muted); --party-divider-color: var(--color-divider); --party-back-bg: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 60%), var(--color-surface); --party-back-row-gap: .25rem; --party-back-pad-y: var(--space-lg); --party-back-pad-x: var(--space-lg); --party-back-pad-b: var(--space-md); --party-back-divider-w: 65%; --party-back-divider-h: 2px; --party-back-quote-max: 50ch; --party-back-bio-max: 50ch; --party-toolbar-gap: var(--space-xs); --party-toolbar-pad-x: var(--space-2xs); --party-toggle-fs: var(--step-2); --party-toggle-pad-y: var(--chip-pad-y); --party-toggle-pad-x: var(--chip-pad-x); --party-toggle-border: var(--chip-outline-border); --party-toggle-radius: var(--chip-radius); --party-toggle-bg: var(--chip-filled-bg); --party-toggle-shadow: var(--chip-shadow); --party-note-fs: var(--step-2); --party-note-color: var(--color-text-muted); --party-note-mt: -.25rem; --party-note-mb: var(--space-md); --reveal-dur: 260ms; --reveal-ease: var(--ease-standard, cubic-bezier(.2,.0,.2,1)); } .wedding-party-grid{content-visibility:visible;contain-intrinsic-size:1000px;display:grid;grid-template-columns:repeat(var(--party-cols),minmax(min(var(--party-min-col),100%),1fr));gap:var(--party-gap);max-inline-size:var(--party-max);inline-size:min(92%,var(--party-max));margin:0 auto;align-items:start;grid-auto-rows:var(--party-auto-rows);overflow:visible;} .party-page-intro{max-inline-size:var(--page-lede-max);inline-size:min(100%,var(--page-lede-max));margin:0 auto;text-align:center;font-family:var(--font-body);font-size:var(--type-body-fs);line-height:var(--lh-comfy);color:var(--color-text-muted);} .party-mode-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);max-inline-size:var(--party-max);inline-size:min(92%,var(--party-max));margin:0 auto var(--space-xl);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-muted);border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in oklab,var(--color-surface),var(--color-accent) 6%) 0%,var(--color-surface) 100%);box-shadow:var(--shadow-sm);} .party-mode-bar.is-party-mode{background:linear-gradient(135deg,color-mix(in oklab,var(--color-accent),white 88%) 0%,color-mix(in oklab,var(--color-surface),var(--color-accent) 10%) 100%);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 45%);} .party-mode-copy{display:grid;gap:.2rem;} .party-mode-kicker{margin:0;font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);} .party-mode-text{margin:0;font-family:var(--font-body);font-size:var(--step-1);line-height:var(--lh-comfy);color:var(--color-text);} .party-mode-switch{white-space:nowrap;} .party-spotlight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--party-gap);max-inline-size:var(--party-max);inline-size:min(92%,var(--party-max));margin:0 auto var(--space-2xl);align-items:start;} .party-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2vw,2.5rem);max-inline-size:calc(var(--party-max) + 4rem);inline-size:min(94%,calc(var(--party-max) + 4rem));margin:0 auto;} .party-group{display:grid;gap:var(--space-md);align-content:start;} .party-group-header{display:grid;gap:.35rem;justify-items:center;text-align:center;padding:0 var(--space-sm);} .party-group-kicker{margin:0;font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent);} .party-group-title{margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--color-text);} .party-group .wedding-party-grid{grid-template-columns:1fr;max-inline-size:none;inline-size:100%;} .party-group .party-card,.party-spotlight .party-card{max-inline-size:none;inline-size:100%;} .party-card{position:relative;isolation:isolate;max-inline-size:var(--party-card-maxw);border:none;border-radius:var(--party-card-radius);box-shadow:var(--party-card-shadow);background:var(--color-surface);overflow:clip;} .party-card>details{display:block;} .party-summary{display:grid;grid-template-rows:auto auto;align-items:end;justify-items:center;row-gap:var(--party-front-row-gap);padding:0 0 var(--party-front-pad-b);list-style:none;cursor:default;} .party-summary::-webkit-details-marker{display:none;} .party-summary img{grid-row:1/2;inline-size:100%;aspect-ratio:var(--card-ratio,3/4);object-fit:cover;object-position:center;display:block;background:var(--color-surface-2,transparent);} .party-summary-text{grid-row:2/3;display:grid;grid-template-rows:auto auto;justify-items:center;gap:.15rem;inline-size:100%;text-align:center;padding:0 var(--space-md);} .party-summary h3{font-family:var(--font-body);font-size:var(--party-name-fs);line-height:var(--lh-tight);color:var(--color-text);margin:.4rem 0 .1rem;letter-spacing:var(--ls-tight);text-wrap:balance;max-inline-size:24ch;} .party-summary .role{font-family:var(--font-body-i);font-size:var(--party-role-fs);line-height:var(--lh-tight);color:var(--party-role-color);margin:0;} .party-content{background:var(--party-back-bg);padding:var(--party-back-pad-y) var(--party-back-pad-x) var(--party-back-pad-b);display:grid;grid-template-rows:auto auto auto auto;justify-items:center;text-align:center;row-gap:var(--party-back-row-gap);font-family:var(--font-body);font-size:var(--party-bio-fs);line-height:var(--lh-normal);color:var(--color-text);overflow:clip;max-height:0;opacity:0;transform:translateY(-.35rem);transition:max-height var(--reveal-dur) var(--reveal-ease),opacity var(--reveal-dur) var(--reveal-ease),transform var(--reveal-dur) var(--reveal-ease);} .party-content .divider{inline-size:var(--party-back-divider-w);block-size:var(--party-back-divider-h);background:var(--party-divider-color);opacity:var(--opacity-half,.5);margin:.35rem 0 .65rem;} .party-content h4{font-family:var(--font-display);font-size:var(--party-back-title-fs);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--color-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .party-content .role{font-family:var(--font-body-i);font-weight:400;font-size:var(--party-role-fs);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--color-accent);margin:.15rem 0 .45rem;} .party-content .bio{font-family:var(--font-body);font-size:var(--party-bio-fs);color:var(--color-text);margin:.4rem 0;padding:0;max-inline-size:var(--party-back-bio-max);} .party-content .quote{font-family:var(--font-body-i);font-size:var(--party-bio-fs);color:var(--color-text-muted);margin:.4rem 0;padding:0;max-inline-size:var(--party-back-quote-max);} .party-toggle{position:absolute;inset-inline-end:.5rem;inset-block-start:.5rem;z-index:3;display:flex;gap:.35rem;} .party-card>details[open] .party-content{max-height:60rem;opacity:1;transform:translateY(0);padding-bottom:var(--party-back-pad-b);} .party-toggle .btn{font:inherit;font-size:var(--step-0);padding:.35rem .7rem;border-radius:var(--radius-sm);border:1px solid var(--color-divider);background:color-mix(in oklab,var(--color-surface),var(--color-text) 4%);cursor:pointer;box-shadow:var(--shadow-sm);} .party-card>details:not([open])~.party-toggle .collapse-btn{display:none;} .party-card>details[open]~.party-toggle .reveal-btn{display:none;} .party-card>details .reveal-btn,.party-card>details .collapse-btn{display:none!important;} .party-note{max-inline-size:var(--party-max);inline-size:min(92%,var(--party-max));margin:var(--party-note-mt) auto var(--party-note-mb);text-align:center;font-family:var(--font-body-i);font-size:var(--party-note-fs);color:var(--party-note-color);} #families{--family-max:var(--party-max);--family-cols:2;--family-min-col:16rem;--family-gap:var(--space-lg);--family-role-color:var(--color-text-muted);--family-back-bg:linear-gradient(180deg,var(--color-bg) 0%,var(--color-surface) 60%),var(--color-surface);} #families .page-section-head{margin-bottom:0;} #families .family-note{max-inline-size:var(--family-max);inline-size:min(92%,var(--family-max));margin:calc(-.25rem) auto 0;text-align:center;font-family:var(--font-body-i);font-size:var(--step-2);color:var(--color-text-muted);} #families .family-group-block{display:grid;gap:var(--space-md);max-inline-size:var(--family-max);inline-size:min(92%,var(--family-max));margin:0 auto;} #families .family-group-block + .family-group-block{margin-top:var(--space-sm);} #families .family-group{max-inline-size:none;inline-size:100%;margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--color-text);} #families .family-grid{display:grid;grid-template-columns:repeat(var(--family-cols),minmax(min(var(--family-min-col),100%),1fr));gap:var(--family-gap);max-inline-size:none;inline-size:100%;margin:0;align-items:start;} #families .party-card{background:var(--color-surface);box-shadow:var(--party-card-shadow);border-radius:var(--party-card-radius);} #families .party-content{background:var(--family-back-bg);} #families .party-summary .role{color:var(--family-role-color);} @media (max-width:56.25em){#families{--family-cols:1;--family-gap:var(--space-md);} } @media (max-width:56.25em){[data-page="party"]{--party-cols:1;--party-gap:var(--space-md);--party-name-fs:var(--step-2);--party-role-fs:var(--step-2);--party-bio-fs:var(--step-1);--party-back-title-fs:var(--step-3);} .party-mode-bar,.party-spotlight,.party-columns{grid-template-columns:1fr;} .party-mode-bar{display:grid;justify-items:center;text-align:center;} .party-spotlight{margin-bottom:var(--space-xl);} .party-columns{gap:var(--space-xl);} .party-group-title{font-size:var(--step-3);}} @media (max-width:37.5em){[data-page="party"]{--card-ratio:4/5;--party-card-maxw:100%;--party-back-pad-y:var(--space-sm);--party-back-pad-x:var(--space-sm);--party-back-divider-w:54%;} .party-mode-bar{justify-items:start;text-align:left;padding:var(--space-sm);} .party-mode-switch{inline-size:100%;} .party-group-header{justify-items:start;text-align:left;padding:0;} .party-group-title{font-size:var(--step-2);} .party-columns,.party-spotlight{inline-size:min(92%,var(--party-max));}} @media (prefers-reduced-motion:reduce){.party-content{transition:none;transform:none!important;}} /* ================================================ ๐Ÿ“ Event Details (consolidated) ================================================ */ [data-page="details"]{ container-type:inline-size; container-name:details; --page-hero-max:54rem; --event-inline: var(--inline-lg); --event-title-primary-fs: var(--type-card-title-fs); --event-title-subevent-fs: var(--step-4); --event-primary-label-fs: var(--type-body-sm-fs); --event-subevent-label-fs: var(--type-body-sm-fs); --event-primary-value-fs: var(--type-body-fs); --event-subevent-value-fs: var(--type-body-sm-fs); --event-cta-fs: var(--type-body-sm-fs); /* Invitation grid + subgroup grids */ --event-subgrid-min: 22rem; --event-subgrid-gap: var(--space-sm); /* Calendar menu sizing (popover) */ --event-cal-menu-minw: 14rem; --event-cal-menu-li-gap: .5rem; --event-cal-menu-li-pad: .5rem .75rem; /* Primary card photo banner */ --event-hero-mt: var(--space-md); --event-hero-radius: calc(var(--radius-xl) - 2px); --event-hero-img-h: clamp(8rem, 26svh, 16rem); /* Timeline (layout only) */ --timeline-container-max: var(--section-max); --timeline-line-w: 2px; --timeline-line-gradient: repeating-linear-gradient(to bottom,var(--color-accent),var(--color-accent) .25rem,transparent .25rem,transparent 1rem); /* primary spacing knobs */ --timeline-row-gap: clamp(0.9rem, 1.2vi, 1.25rem); /* vertical space between items */ --timeline-spine-gap: clamp(1.2rem, 2.2vi, 1.6rem); /* card โ†” spine on desktop */ --timeline-edge-gutter: clamp(1rem, 2.2vi, 1.5rem); /* card โ†” outer edge */ /* sizing */ --timeline-card-max: 30rem; /* soft cap for card width */ --timeline-dot: .5rem; /* spine dot size */ --timeline-icon-size: var(--icon-size); --timeline-anchor-y: 2.15rem; --timeline-card-pad-block: clamp(1rem,.7rem + .65vi,1.2rem); --timeline-card-pad-inline: clamp(1rem,.65rem + 1.1vi,1.35rem); /* text sizes */ --timeline-toggle-fs: var(--step-4); --timeline-details-fs: var(--step-1); --timeline-details-lh: var(--lh-normal); /* Media strip */ --media-max: var(--container-lg); --media-inline: min(92%, var(--media-max)); --media-min: 13.75rem; --media-gap: var(--space-sm); --media-gap-balanced: var(--space-sm); --media-aspect: 3 / 4; --media-radius: var(--radius-md); --media-strip-pad-y: var(--space-md); --media-strip-pad-x: var(--space-lg); --media-strip-bg: var(--color-surface); --media-strip-radius: var(--radius-xl); --media-strip-title-fs: var(--step-4); --media-strip-title-mb: var(--space-md); } /* Primary card + hero */ #event-details>.event-info.primary{inline-size:var(--event-inline);margin:0 auto;scroll-margin-top:var(--anchor-scroll-offset)} .event-info.primary .event-info-hero{margin-top:calc(var(--event-hero-mt) + .25rem);border-radius:var(--event-hero-radius);overflow:hidden} [data-page="details"] .event-info.is-framed{--frame-current-outer-color:var(--frame-outer-color);--frame-current-inner-color:var(--frame-inner-color);--frame-current-outer-w:var(--frame-outer-w);--frame-current-inner-w:var(--frame-inner-w);--frame-current-gap:var(--frame-gap);--frame-current-radius:var(--frame-radius-outer);border:var(--frame-current-outer-w) solid var(--frame-current-outer-color)!important;border-radius:var(--frame-current-radius);padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--card-shadow),var(--card-sheen);background:var(--card-bg);background-clip:padding-box;isolation:isolate} [data-page="details"] .event-info.is-framed::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} [data-page="details"] .event-info{display:grid;gap:var(--space-sm)} [data-page="details"] .event-info-title{margin:0;padding:0;text-align:left;font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:var(--ls-subtle);line-height:var(--lh-tight);color:var(--color-text)} [data-page="details"] .event-info.primary .event-info-title{font-size:clamp(1.82rem,1.42rem + 1vw,2.32rem)} [data-page="details"] .event-info.subevent .event-info-title{font-size:clamp(1.55rem,1.26rem + .78vw,1.95rem)} [data-page="details"] .event-info-title::before,[data-page="details"] .event-info-title::after{display:none} [data-page="details"] .event-info-intro{margin:0;max-inline-size:58ch;text-align:left;color:var(--color-text-muted);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy)} [data-page="details"] .event-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:var(--space-xs);margin:0} [data-page="details"] .event-actions > *{inline-size:auto} [data-page="details"] .event-action-note{margin:0;display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--btn-h-md);max-inline-size:100%;padding:var(--btn-pad-y) var(--btn-pad-x);border:var(--btn-ghost-border);border-radius:var(--btn-radius);background:color-mix(in oklab,var(--color-surface-muted) 82%,white);box-shadow:var(--shadow-sm);font-size:var(--btn-fs);font-weight:var(--weight-bold);line-height:var(--lh-tight);color:var(--color-text-muted);text-align:center;white-space:normal} [data-page="details"] .event-info.subevent .event-actions{align-items:flex-start;row-gap:.7rem;column-gap:var(--space-xs);margin:var(--space-2xs) 0 var(--space-sm)} [data-page="details"] .event-info.subevent .event-actions > *{display:flex;align-items:stretch} [data-page="details"] .event-info.subevent .event-actions .event-info-calendar{padding:0} [data-page="details"] #venue-photos .page-section-head{margin-bottom:var(--space-lg)} [data-page="details"] .venue-sneak-peek-intro{max-inline-size:46rem;margin:0 auto;text-align:center;color:var(--color-text-muted);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy)} [data-page="details"] .venue-sneak-peek-media{display:grid;gap:var(--space-lg)} [data-page="details"] .venue-sneak-peek{display:grid;gap:var(--space-lg);align-items:stretch} [data-page="details"] .venue-sneak-peek-copy{display:grid;align-content:start;gap:var(--space-sm);padding:clamp(1.25rem,2vw,1.7rem);border-radius:var(--frame-radius-outer);background:var(--card-bg);box-shadow:var(--card-shadow),var(--card-sheen)} [data-page="details"] .venue-sneak-peek-copy.is-framed{--frame-current-outer-color:var(--frame-outer-color);--frame-current-inner-color:var(--frame-inner-color);--frame-current-outer-w:var(--frame-outer-w);--frame-current-inner-w:var(--frame-inner-w);--frame-current-gap:var(--frame-gap);--frame-current-radius:var(--frame-radius-outer);border:var(--frame-current-outer-w) solid var(--frame-current-outer-color)!important;border-radius:var(--frame-current-radius);background:var(--card-bg);background-clip:padding-box;isolation:isolate} [data-page="details"] .venue-sneak-peek-copy.is-framed::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} [data-page="details"] .venue-sneak-peek-copy p{margin:0;color:var(--color-text-muted);line-height:var(--lh-comfy)} [data-page="details"] .venue-sneak-peek-kicker{margin:0;font-family:var(--font-body);font-size:var(--step--1);font-weight:var(--weight-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent)!important} [data-page="details"] .venue-sneak-peek-title{margin:0;font-family:var(--font-display);font-size:clamp(1.45rem,1.2rem + .65vw,1.9rem);line-height:var(--lh-tight);color:var(--color-text)} [data-page="details"] .venue-sneak-peek-lede{color:var(--color-text)!important} [data-page="details"] .venue-gallery-slider{display:grid;align-content:start;gap:var(--space-sm)} [data-page="details"] .venue-gallery-stage-shell{position:relative} [data-page="details"] .venue-gallery-stage{margin:0;min-block-size:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:calc(var(--media-radius) + .2rem);border:1px solid color-mix(in oklab,var(--border-muted),white 12%);background:color-mix(in oklab,var(--color-surface) 95%,white);box-shadow:var(--card-shadow),var(--card-sheen);cursor:pointer} [data-page="details"] .venue-gallery-stage:hover{transform:none} [data-page="details"] .venue-gallery-stage:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--card-shadow),var(--card-sheen)} [data-page="details"] .venue-gallery-stage img{inline-size:100%;block-size:100%;aspect-ratio:4 / 3;object-fit:cover;display:block} [data-page="details"] .venue-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;inline-size:2.9rem;block-size:2.9rem;border-radius:999px;border:var(--btn-ghost-border);background:var(--btn-ghost-bg);box-shadow:var(--btn-shadow);display:grid;place-items:center;padding:0;font-size:1.55rem;line-height:1;color:var(--btn-ghost-color);backdrop-filter:saturate(118%);transition:var(--transition-color),var(--transition-elevate),transform var(--dur-fast) var(--ease-standard)} [data-page="details"] .venue-gallery-arrow:hover{transform:translateY(calc(-50% - 1px));background:var(--btn-ghost-bg-hover);border-color:color-mix(in oklab,var(--color-accent),var(--border-muted) 42%);box-shadow:var(--btn-shadow-hover)} [data-page="details"] .venue-gallery-arrow:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-shadow)} [data-page="details"] .venue-gallery-prev{left:clamp(.75rem,1.4vw,1rem)} [data-page="details"] .venue-gallery-next{right:clamp(.75rem,1.4vw,1rem)} [data-page="details"] .venue-gallery-caption{display:grid;gap:.22rem;padding:.9rem 1rem;border:1px solid color-mix(in oklab,var(--border-muted),white 14%);border-radius:var(--radius-lg);background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 96%,white),color-mix(in oklab,var(--color-surface-muted) 82%,white));box-shadow:var(--shadow-sm)} [data-page="details"] .venue-gallery-caption-title,[data-page="details"] .venue-gallery-caption-copy,[data-page="details"] .venue-gallery-count{margin:0} [data-page="details"] .venue-gallery-caption-title{font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-tight);color:var(--color-text)} [data-page="details"] .venue-gallery-caption-copy{font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy);color:var(--color-text-muted)} [data-page="details"] .venue-gallery-count{justify-self:end;font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} [data-page="details"] .venue-sneak-peek-gallery-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-xs);margin-top:calc(var(--space-xs) * -1)} [data-page="details"] .venue-sneak-peek-gallery-title,[data-page="details"] .venue-sneak-peek-gallery-note{margin:0} [data-page="details"] .venue-sneak-peek-gallery-title{font-family:var(--font-display);font-size:var(--step-3);color:var(--color-text)} [data-page="details"] .venue-sneak-peek-gallery-note{color:var(--color-text-muted);font-size:var(--step-0)} [data-page="details"] .venue-sneak-peek-grid{inline-size:100%;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(7rem,100%),1fr));gap:var(--space-xs)} [data-page="details"] .venue-gallery-thumb{display:grid;gap:.35rem;padding:.35rem;border:1px solid color-mix(in oklab,var(--border-muted),white 14%);border-radius:var(--radius-md);background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 96%,white),color-mix(in oklab,var(--color-surface-muted) 82%,white));box-shadow:var(--shadow-sm);transition:var(--transition-color),var(--transition-elevate),border-color var(--dur-fast) var(--ease-standard)} [data-page="details"] .venue-gallery-thumb:hover{transform:var(--hover-move);border-color:color-mix(in oklab,var(--color-accent),white 32%)} [data-page="details"] .venue-gallery-thumb:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--shadow-sm)} [data-page="details"] .venue-gallery-thumb.is-active{border-color:color-mix(in oklab,var(--color-accent),white 18%);box-shadow:0 0 0 1px color-mix(in oklab,var(--color-accent),white 34%),var(--shadow-sm)} [data-page="details"] .venue-gallery-thumb img{inline-size:100%;display:block;aspect-ratio:4 / 3;object-fit:cover;border-radius:calc(var(--radius-md) - .2rem)} @media (min-width:64em){ [data-page="details"] .venue-sneak-peek{grid-template-columns:minmax(18rem,.95fr) minmax(0,1.2fr)} } @media (max-width:56.25em){ [data-page="details"] .venue-gallery-arrow{inline-size:2.6rem;block-size:2.6rem} [data-page="details"] .venue-sneak-peek-gallery-head{justify-content:flex-start;align-items:start} } [data-page="details"] .event-actions .button,[data-page="details"] .event-actions .event-info-calendarbutton{inline-size:auto;min-inline-size:11rem} [data-page="details"] .event-detail-list{display:grid;gap:var(--space-sm)} #ceremony .event-detail-list{grid-template-columns:repeat(3,minmax(0,1fr))} [data-page="details"] .event-card-toggle{justify-self:start;min-inline-size:auto;max-inline-size:100%;margin:calc(var(--space-2xs) * -1) 0 0;text-align:center;white-space:normal} [data-page="details"] .event-card-toggle--locked{cursor:default;pointer-events:none} [data-page="details"] .event-card-toggle-more,[data-page="details"] .event-card-toggle-less{display:inline} [data-page="details"] .event-card-toggle-less{display:none} [data-page="details"] .event-info.details-expanded .event-card-toggle-more{display:none} [data-page="details"] .event-info.details-expanded .event-card-toggle-less{display:inline} [data-page="details"] .event-info.subevent.has-collapsible-notes:not(.details-expanded) .event-detail-item--guest-notes{display:none} [data-page="details"] .event-detail-extra{display:grid;gap:var(--space-3xs);max-block-size:0;opacity:0;overflow:hidden;transition:max-block-size var(--dur-mid) var(--ease-standard),opacity var(--dur-mid) var(--ease-standard),margin-top var(--dur-mid) var(--ease-standard)} [data-page="details"] .event-info.details-expanded .event-detail-extra{max-block-size:20rem;opacity:1;margin-top:var(--space-3xs)} .event-detail-item{display:grid;align-content:start;gap:var(--space-3xs);padding:var(--space-md);border:1px solid color-mix(in oklab,var(--border-muted),white 10%);border-radius:var(--card-radius);background:color-mix(in oklab,var(--color-surface) 88%,white);box-shadow:var(--shadow-sm)} [data-page="details"] .event-info.primary .event-detail-item{min-block-size:100%} [data-page="details"] .event-info-row{display:grid;gap:var(--space-3xs);padding:0;border:0;background:none} [data-page="details"] .event-info-row + .event-info-row{padding-top:var(--space-sm);margin-top:calc(var(--space-xs) + .1rem);border-top:1px solid color-mix(in oklab,var(--border-muted),white 18%)} [data-page="details"] .event-info-label, .event-detail-label{display:block;margin:0;font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)} [data-page="details"] .event-info-label-text{font-family:inherit;font-weight:inherit;font-style:normal;color:inherit} [data-page="details"] .event-info-value, .event-detail-body{display:grid;gap:var(--space-3xs);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy);color:var(--color-text)} [data-page="details"] .event-info-value > *, .event-detail-body > *{margin:0} [data-page="details"] .event-inline-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)} [data-page="details"] .event-inline-map{min-block-size:auto;padding:.42rem .8rem;font-size:var(--step-0);line-height:1.2} [data-page="details"] .palette-section .page-section-head{margin-bottom:var(--space-md)} [data-page="details"] .palette-section .page-section-copy{max-inline-size:46rem;margin-inline:auto} [data-page="details"] .palette-section-stack{inline-size:min(100%,var(--inline-lg));margin:0 auto;display:grid;gap:var(--space-lg)} [data-page="details"] .palette-section-stack .event-info{max-inline-size:none} [data-page="details"] .palette-card{max-inline-size:var(--inline-lg);margin:0 auto} [data-page="details"] .palette-swatch-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem .95rem;padding:.1rem 0} [data-page="details"] .palette-swatch-token{margin:0;display:grid;justify-items:center;gap:.38rem;min-inline-size:4.2rem} [data-page="details"] .palette-swatch-orb{display:block;inline-size:3.7rem;block-size:3.7rem;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 .32rem .7rem rgba(62,52,35,.06),inset 0 0 0 1px rgba(62,52,35,.08)} [data-page="details"] .palette-swatch-token figcaption{display:grid;gap:.08rem;font-size:clamp(.72rem,.7rem + .08vw,.8rem);line-height:1.15;color:var(--color-text-muted);letter-spacing:.02em;text-transform:none;text-align:center} [data-page="details"] .palette-swatch-name{color:var(--color-text-muted)} [data-page="details"] .palette-swatch-code{font-size:clamp(.66rem,.64rem + .06vw,.72rem);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--color-text-muted),white 10%)} [data-page="details"] .attire-card{gap:.65rem} [data-page="details"] .attire-summary{margin:0;max-inline-size:46rem;font-size:var(--type-body-sm-fs);line-height:1.45;color:var(--color-text-muted)} [data-page="details"] .attire-card .event-detail-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} [data-page="details"] .attire-card .event-detail-item{padding:.82rem} [data-page="details"] .attire-card .event-detail-body{gap:.3rem} [data-page="details"] .attire-card .event-inline-links{margin-top:.1rem} [data-page="details"] .attire-card--visual .event-detail-item:last-child{grid-column:1 / -1} [data-page="details"] .attire-visual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:.72rem;margin-top:.05rem} [data-page="details"] .attire-visual-card{margin:0;overflow:hidden;border:1px solid color-mix(in oklab,var(--border-muted),white 10%);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--color-surface) 90%,white);box-shadow:var(--shadow-sm)} [data-page="details"] .attire-visual-card img{display:block;inline-size:100%;aspect-ratio:4 / 5;object-fit:cover;background:linear-gradient(180deg,rgba(255,252,245,.94),rgba(246,238,229,.98))} [data-page="details"] .attire-visual-card--dress img{object-position:center top} [data-page="details"] .attire-visual-card--suit img,[data-page="details"] .attire-visual-card--shirt img{object-position:center top} [data-page="details"] .attire-visual-card--belt,[data-page="details"] .attire-visual-card--oxford,[data-page="details"] .attire-visual-card--tie,[data-page="details"] .attire-visual-card--tie-photo,[data-page="details"] .attire-visual-card--square,[data-page="details"] .attire-visual-card--socks{background:#fff} [data-page="details"] .attire-visual-card--belt img,[data-page="details"] .attire-visual-card--oxford img,[data-page="details"] .attire-visual-card--tie-photo img{object-fit:contain;object-position:center center;padding:.6rem;background:#fff} [data-page="details"] .attire-tie-swatch{position:relative;inline-size:100%;aspect-ratio:4 / 5;background:#fff} [data-page="details"] .attire-tie-swatch::before{content:"";position:absolute;left:50%;top:14%;transform:translateX(-50%);inline-size:46%;block-size:72%;clip-path:polygon(28% 0,72% 0,63% 58%,100% 82%,50% 100%,0 82%,37% 58%);background:repeating-linear-gradient(135deg,#7f98b4 0 7px,#97aec5 7px 14px);box-shadow:0 12px 24px rgba(62,52,35,.12)} [data-page="details"] .attire-pocket-square{position:relative;inline-size:100%;aspect-ratio:4 / 5;background:#fff} [data-page="details"] .attire-pocket-square::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-42%) rotate(-2deg);inline-size:56%;block-size:56%;background:linear-gradient(180deg,#ffffff,#f3efe8);clip-path:polygon(14% 10%,84% 10%,92% 34%,64% 90%,12% 86%,8% 32%);box-shadow:0 12px 20px rgba(62,52,35,.12)} [data-page="details"] .attire-socks-swatch{position:relative;inline-size:100%;aspect-ratio:4 / 5;background:#fff} [data-page="details"] .attire-socks-swatch::before,[data-page="details"] .attire-socks-swatch::after{content:"";position:absolute;top:18%;inline-size:24%;block-size:58%;background:#24344d;border-radius:.7rem .7rem .35rem .35rem;box-shadow:0 10px 18px rgba(36,52,77,.15)} [data-page="details"] .attire-socks-swatch::before{left:28%;clip-path:polygon(0 0,100% 0,100% 72%,78% 72%,82% 100%,22% 100%,16% 74%,0 74%)} [data-page="details"] .attire-socks-swatch::after{right:28%;clip-path:polygon(0 0,100% 0,100% 74%,84% 74%,78% 100%,18% 100%,22% 72%,0 72%)} [data-page="details"] .attire-visual-card--shoe{background:#fff} [data-page="details"] .attire-visual-card--shoe img{object-fit:contain;object-position:center center;padding:.55rem;background:#fff} [data-page="details"] .event-info-subtext,[data-page="details"] .event-info-placeholder,.event-detail-note{font-size:var(--type-body-sm-fs);color:var(--color-text-muted)} [data-page="details"] .event-info-placeholder{font-family:var(--font-body-i)} [data-page="details"] .event-info-value ul,.event-detail-bullets{margin:.15rem 0 0;padding-left:1.15rem;display:grid;gap:.35rem} .event-info--rewritten .event-info-row{display:none} /* Invitation subgrid */ .event-subgrid{inline-size:var(--event-inline);margin:var(--space-xl) auto 0;display:grid;grid-template-columns:1fr;gap:0} .event-subgrid .subgroup{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:var(--event-subgrid-gap);margin:0 0 var(--space-xl)} .event-subgrid .subgroup:last-child{margin-bottom:0} .event-subgrid .event-right-title{grid-column:1/-1;margin:0 0 var(--space-sm);text-align:center;font-family:var(--font-display);font-size:clamp(1.9rem,1.55rem + .85vw,2.45rem);font-weight:var(--weight-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-subtle);color:var(--color-text)} .event-subgrid .subgroup + .event-right-title{margin-top:var(--space-sm)} .event-right-note{display:block;margin-top:var(--space-2xs);font-family:var(--font-body);font-size:var(--type-body-sm-fs);font-weight:var(--weight-regular);letter-spacing:0;text-transform:none;color:var(--color-text-muted)} .event-subgrid .event-right-title.portal-hidden { margin: 0 !important;} .event-subgrid .subgroup:not(:has(.event-info.subevent:not(.portal-hidden):not(.phase-hidden))) {display: none !important; margin: 0 !important; padding: 0 !important; } .event-subgrid .event-info{max-inline-size:none} [data-page="details"] .event-info.subevent{grid-template-columns:repeat(2,minmax(0,1fr))} [data-page="details"] .event-info.subevent > :not(.event-info-row){grid-column:1/-1} [data-page="details"] .event-info.subevent .event-info-row, [data-page="details"] .event-info.subevent .event-info-row + .event-info-row{align-content:start;gap:var(--space-3xs);padding:var(--space-md);margin-top:0;border:1px solid color-mix(in oklab,var(--border-muted),white 10%);border-top:1px solid color-mix(in oklab,var(--border-muted),white 10%);border-radius:var(--card-radius);background:color-mix(in oklab,var(--color-surface) 88%,white);box-shadow:var(--shadow-sm);min-block-size:100%} .gate-reveal-card .event-info-row:nth-last-child(1), .gate-reveal-card .event-info-row:nth-last-child(2):nth-child(even){min-block-size:0} .gate-reveal-card .event-info-intro{margin-bottom:var(--space-sm)} .event-subgrid .event-info .event-info-row{grid-template-columns:1fr} .event-subgrid .subgroup[data-group="invite"] .event-info{--card-accent-color:var(--color-accent)} .event-subgrid .subgroup[data-group="live"] .event-info{--card-accent-color:var(--color-action)} .event-info-calendar{padding:calc(var(--space-sm) + .15rem) 0 var(--space-sm)} [data-page="details"] .event-info.subevent{align-content:start} [data-page="details"] .event-info.subevent .event-info-calendar{padding:0} /* Venue media */ [data-page="details"] .media-grid{margin:var(--space-md) auto 0} /* Timeline */ [data-page="details"] .timeline-section .page-section-head{margin-bottom:var(--space-lg)} .timeline-intro{max-inline-size:42rem;margin:0 auto;text-align:center;color:var(--color-text-muted);font-size:var(--type-body-sm-fs);line-height:var(--lh-comfy)} .timeline-container{position:relative;inline-size:min(100%,var(--timeline-container-max));margin-inline:auto;padding:var(--timeline-container-pt,var(--space-lg)) 0 var(--timeline-container-pb,var(--space-xl));} .timeline-container::before{content:"";position:absolute;inset-block:0;left:50%;inline-size:var(--timeline-line-w);background-image:var(--timeline-line-gradient);transform:translateX(-50%);z-index:1;} .timeline-title{position:relative;margin:0 0 var(--space-xs);padding:.25rem 0;font-family:var(--font-display);font-size:clamp(1.9rem,1.55rem + .85vw,2.45rem);font-weight:var(--weight-semibold);letter-spacing:var(--ls-subtle);line-height:var(--lh-tight);text-align:center;color:var(--color-text);} .timeline-item{position:relative;inline-size:50%;margin-block:var(--timeline-row-gap);display:flex;align-items:flex-start;contain:layout style;} .timeline-item.is-left{right:0;} .timeline-item.is-right{left:50%;} .timeline-item::before{content:"";position:absolute;top:var(--timeline-anchor-y);transform:translateY(-50%);inline-size:var(--timeline-spine-gap);block-size:2px;background:color-mix(in oklab,var(--border-muted),white 6%);opacity:.95;z-index:2;} .timeline-item.is-left::before{right:0;left:auto;} .timeline-item.is-right::before{left:0;right:auto;} .timeline-item::after{content:"";position:absolute;top:var(--timeline-anchor-y);transform:translate(-50%,-50%);inline-size:var(--timeline-dot);block-size:var(--timeline-dot);border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 .22rem color-mix(in oklab,var(--color-accent),transparent 78%);z-index:2;} .timeline-item.is-left::after{left:100%;} .timeline-item.is-right::after{left:0;} .timeline-content{position:relative;display:grid;align-content:start;gap:var(--space-2xs);inline-size:min(calc(100% - var(--timeline-spine-gap) - var(--timeline-edge-gutter)),var(--timeline-card-max));padding:var(--timeline-card-pad-block) var(--timeline-card-pad-inline);padding-right:calc(var(--timeline-card-pad-inline) + var(--timeline-icon-size) + .95rem);border-radius:var(--card-radius);transition:var(--transition-elevate),var(--transition-color),transform var(--dur-mid) var(--ease-standard);opacity:1;isolation:isolate;z-index:2;overflow:hidden} .timeline-content.interactive{cursor:pointer} .timeline-content:hover{transform:translateY(-1px);background:var(--card-bg-muted);box-shadow:var(--card-shadow-hover),var(--card-sheen);} .timeline-content.active{background:var(--card-bg-muted);} .timeline-content:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--card-shadow-hover),var(--card-sheen)} .timeline-item.is-left .timeline-content{margin-left:var(--timeline-edge-gutter);margin-right:var(--timeline-spine-gap);text-align:left;} .timeline-item.is-right .timeline-content{margin-right:var(--timeline-edge-gutter);margin-left:var(--timeline-spine-gap);text-align:left;} .timeline-event{font-family:var(--font-body);font-weight:var(--weight-bold);letter-spacing:.1px;line-height:var(--lh-tight);font-size:var(--type-body-fs);margin:0;max-inline-size:22ch} .timeline-time{font-family:var(--font-body-i);line-height:1.35;color:var(--color-text-subtle);font-size:var(--type-body-sm-fs);margin:0} .timeline-content img{position:absolute;inline-size:var(--timeline-icon-size);block-size:var(--timeline-icon-size);top:calc(var(--timeline-card-pad-block) + .05rem);right:var(--timeline-card-pad-inline);transform:none;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--color-surface-muted),white 18%);padding:var(--space-2xs);box-shadow:var(--shadow-md);z-index:1;} .timeline-toggle-indicator{position:absolute;top:calc(var(--timeline-card-pad-block) + .1rem);right:calc(var(--timeline-card-pad-inline) + var(--timeline-icon-size) + .35rem);display:grid;place-items:center;inline-size:1.6rem;block-size:1.6rem;border-radius:999px;background:color-mix(in oklab,var(--color-surface) 84%,white);font-size:1.15rem;color:var(--color-accent);line-height:1;transition:transform var(--dur-mid) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);user-select:none;opacity:.88;box-shadow:var(--shadow-sm)} .timeline-content:hover .timeline-toggle-indicator,.timeline-content.active .timeline-toggle-indicator{opacity:1;background:color-mix(in oklab,var(--color-accent),white 80%)} .timeline-content.active .timeline-toggle-indicator{transform:rotate(45deg);} .timeline-toggle-indicator::after{content:"";position:absolute;inset:-8px;border-radius:999px;} .timeline-content .timeline-details{position:relative;inset:auto;inline-size:100%;max-block-size:none;opacity:1;pointer-events:auto;transform:none;display:grid;grid-template-rows:0fr;margin-top:0;border-top:1px solid transparent;padding-top:0;font-family:var(--font-body);font-size:var(--timeline-details-fs);line-height:var(--timeline-details-lh);text-align:left;transition:grid-template-rows var(--dur-mid) var(--ease-standard),margin-top var(--dur-mid) var(--ease-standard),padding-top var(--dur-mid) var(--ease-standard),border-color var(--dur-mid) var(--ease-standard)} .timeline-content .timeline-details > *{overflow:hidden;margin:0} .timeline-content.active .timeline-details{grid-template-rows:1fr;margin-top:var(--space-xs);padding-top:var(--space-xs);border-color:color-mix(in oklab,var(--border-muted),white 18%)} .timeline-content .timeline-details::before{display:none} [data-page="details"] .timeline-content .timeline-details{background:none;border:0;border-radius:0;box-shadow:none;padding-inline:0} [data-page="details"] .timeline-content .timeline-details::after{display:none} [data-page="details"] .timeline-content .timeline-details p{margin:0;color:var(--color-text);line-height:var(--lh-comfy)} @media (max-width:48em){ [data-page="details"] .attire-card .event-detail-list{grid-template-columns:1fr} [data-page="details"] .attire-card--visual .event-detail-item:last-child{grid-column:auto} [data-page="details"]{ --timeline-row-gap:clamp(.7rem,1.6vi,1rem); --timeline-spine-gap:clamp(.8rem,2.6vi,1.05rem); --timeline-edge-gutter:clamp(.5rem,2vi,.9rem); --timeline-card-max:100%; } .timeline-container{padding-inline-start:0} .timeline-container::before{left:1rem;transform:none} .timeline-item, .timeline-item.is-left, .timeline-item.is-right{inline-size:100%;left:auto;right:auto;margin-block:var(--timeline-row-gap);padding-inline-start:2rem} .timeline-item::before, .timeline-item.is-left::before, .timeline-item.is-right::before{left:1rem;right:auto;inline-size:1rem} .timeline-item::after, .timeline-item.is-left::after, .timeline-item.is-right::after{left:1rem} .timeline-content, .timeline-item.is-left .timeline-content, .timeline-item.is-right .timeline-content{inline-size:100%;margin:0;text-align:left} } @media (max-width:40em){ [data-page="details"]{ --timeline-details-fs: 0.9rem; --timeline-icon-size: 3rem; --timeline-row-gap: 1.15rem; } .timeline-content{padding-right:calc(var(--timeline-card-pad-inline) + var(--timeline-icon-size) + .7rem)} .timeline-toggle-indicator{right:calc(var(--timeline-card-pad-inline) + var(--timeline-icon-size) + .2rem)} .event-actions{flex-direction:column;align-items:stretch} .event-actions > *{inline-size:100%} [data-page="details"] .event-info.subevent .event-actions{flex-direction:row;align-items:flex-start} [data-page="details"] .event-info.subevent .event-actions > *{inline-size:auto;max-inline-size:100%} } @media (min-width:80em){ [data-page="details"]{ --timeline-card-max:32rem; --timeline-spine-gap:1.75rem; } } @media (prefers-reduced-motion:reduce){.timeline-content,.timeline-content .timeline-details,.timeline-toggle-indicator{transition:none;}} @media (hover:none){.timeline-content:hover{transform:none;background:var(--card-bg);box-shadow:var(--card-shadow);}} /* ===== Responsive ===== */ @container details (min-width:72em){.event-subgrid{gap:0} .event-subgrid .subgroup{gap:var(--space-lg)}} /* Desktop layout โ‰ฅ48em */ @media (min-width:48em){ .event-subgrid{gap:0} .event-subgrid .subgroup{grid-template-columns:repeat(auto-fit,minmax(var(--event-subgrid-min),1fr));gap:var(--space-md)} } /* Tablet tidy โ‰ค56.25em */ @media (max-width:56.25em){ [data-page="details"]{--event-hero-img-h:clamp(8rem,28svh,14rem);--event-subgrid-min:20rem;--media-min:12.5rem} .event-subgrid{gap:0} .event-subgrid .subgroup{gap:var(--space-md)} [data-page="details"] .event-info.subevent{grid-template-columns:1fr} .event-subgrid .event-info .event-info-row{grid-template-columns:1fr} [data-page="details"] .event-card-toggle{inline-size:100%;justify-content:center} #ceremony .event-detail-list{grid-template-columns:1fr} } /* ================================================ โœ‰๏ธ RSVP (leaned-up) ================================================ */ [data-page="rsvp"]{ container-type:inline-size; container-name:rsvp; --page-hero-max:50rem; --page-highlights-max:min(100%,56rem); /* Shell */ --rsvp-max-w: var(--container-sm); --rsvp-inline: var(--inline-sm); --rsvp-margin-top: var(--space-lg); --rsvp-row-gap: var(--space-sm); /* Copy */ --rsvp-instructions-fs: var(--step-1); --rsvp-instructions-color: var(--color-text); --rsvp-instructions-max: 36rem; --rsvp-instructions-lh: var(--lh-normal); --rsvp-instructions-mt: var(--space-2xs); --rsvp-instructions-mb: var(--rsvp-row-gap); --rsvp-title-mb: var(--space-sm); /* Labels & fields */ --rsvp-label-fs: clamp(.95rem,2.4vw,1.05rem); --rsvp-label-gap: var(--space-3xs, .25rem); --rsvp-ctl-h: var(--btn-h-md); /* Guest rows */ --rsvp-guest-grid: 1.2fr .8fr 1.2fr 1.2fr auto; --rsvp-guest-grid-no-remove: 1.2fr .8fr 1.2fr 1.2fr; --rsvp-guest-gap: var(--space-xs); --rsvp-field-min-w: 8.125rem; --rsvp-guest-input-fs: var(--step-2); --rsvp-guest-input-style: italic; --rsvp-guest-input-min-h: 2.625rem; /* Add/remove & submit */ --rsvp-add-fs: var(--step-2); --rsvp-add-mb: var(--space-sm); --rsvp-remove-fs: var(--step-2); --rsvp-remove-pad: var(--space-2xs); --rsvp-submit-fs: var(--btn-fs); --rsvp-submit-margin: var(--space-sm) 0 var(--space-lg); --rsvp-submit-align: center; --rsvp-submit-loading-opacity: .6; /* Hints & errors */ --rsvp-hint-fs: var(--step-0); --rsvp-hint-color: var(--color-text-muted); --rsvp-error-fs: var(--step-0); --rsvp-inline-hint-fs: var(--step-1); --rsvp-inline-hint-margin: var(--space-2xs) 0 0 var(--space-2xs); --rsvp-invalid-border-color: var(--border-error); /* โ€œPlus oneโ€ note */ --rsvp-plusone-max: 40rem; --rsvp-plusone-pad-y: var(--space-xs); --rsvp-plusone-pad-x: var(--space-sm); --rsvp-plusone-bg: var(--color-surface-muted); --rsvp-plusone-border: var(--rule-thin) var(--rule-style) var(--border-muted); --rsvp-plusone-radius: var(--radius-md); --rsvp-plusone-shadow: var(--shadow-md); --rsvp-plusone-color: var(--color-text); --rsvp-plusone-fs: var(--step-2); --rsvp-plusone-mb: var(--space-sm); /* Success toast */ --rsvp-success-max: var(--container-sm); --rsvp-success-open-max-h: 10rem; --rsvp-success-margin-closed: 0; --rsvp-success-margin-open: var(--space-2xs) 0 var(--space-sm); --rsvp-success-bg: var(--bg-success); --rsvp-success-color: var(--color-success); --rsvp-success-border-color: var(--color-action); --rsvp-success-error-bg: var(--bg-error); --rsvp-success-error-color: var(--color-error); --rsvp-success-error-border-color: var(--border-error); --rsvp-success-pad-y: var(--space-xs); --rsvp-success-pad-x: var(--space-sm); --rsvp-success-radius: var(--radius-md); --rsvp-success-transition: var(--transition-fade), var(--transition-elevate); } /* ===== Form shell ===== */ #rsvp-forms{display:flex;flex-direction:column;gap:var(--rsvp-row-gap);max-inline-size:var(--rsvp-max-w);inline-size:var(--rsvp-inline);margin:var(--rsvp-margin-top) auto 0} .rsvp-event-form{display:flex;flex-direction:column;gap:var(--rsvp-row-gap)} #rsvp-instructions{font-family:var(--font-body);font-size:var(--rsvp-instructions-fs);color:var(--rsvp-instructions-color);max-inline-size:var(--rsvp-instructions-max);margin:var(--rsvp-instructions-mt) auto var(--rsvp-instructions-mb);text-align:center;line-height:var(--rsvp-instructions-lh)} .rsvp-jump-links{margin:0 auto var(--space-xs);max-inline-size:48rem} .rsvp-jump-links a[hidden]{display:none} .rsvp-support-links{margin:0 auto;text-align:center;color:var(--color-text-muted);font-size:var(--step-1)} .rsvp-support-links a{color:inherit;text-decoration:underline;text-underline-offset:.16em} .rsvp-title{margin:0 0 var(--rsvp-title-mb);text-align:center} /* ===== Labels & stack ===== */ .rsvp-event-form :where(label,.form-label){font-family:var(--font-body);font-size:var(--rsvp-label-fs);font-weight:var(--weight-bold);color:var(--color-text)} .rsvp-event-form label{display:flex;flex-direction:column;gap:var(--rsvp-label-gap);margin:0} .event-guest-list{display:grid;row-gap:var(--rsvp-row-gap);margin:0} /* ===== Inputs/selects/textareas ===== */ .rsvp-event-form textarea[rows="1"]{height:var(--rsvp-ctl-h);overflow:hidden;resize:none} /* Hints / errors */ .rsvp-event-form .hint{font-size:var(--rsvp-hint-fs);color:var(--rsvp-hint-color)} .rsvp-event-form .error-text{font-size:var(--rsvp-error-fs);color:var(--color-error);margin-top:.25rem} .rsvp-event-form .inline-hint{min-block-size:1.2em;font-size:var(--rsvp-inline-hint-fs);color:var(--color-error);margin:var(--rsvp-inline-hint-margin)} .rsvp-event-form :is(input,select,textarea).invalid{border-color:var(--rsvp-invalid-border-color);box-shadow:var(--shadow-md)} .rsvp-event-form .locked-guest{background:var(--color-surface-muted);cursor:not-allowed} /* ===== Guest rows ===== */ .rsvp-event-form .guest-row{display:grid;grid-template-columns:var(--rsvp-guest-grid);gap:var(--rsvp-guest-gap);margin:0;position:relative;align-items:center} .rsvp-event-form .guest-row:not(:has(.remove-guest-button)){grid-template-columns:var(--rsvp-guest-grid-no-remove)} .rsvp-event-form .guest-row--simple:not(:has(.remove-guest-button)){grid-template-columns:1.2fr .8fr} .rsvp-event-form :is(input,select){ min-block-size: var(--rsvp-ctl-h); } .rsvp-event-form .field-col{display:flex;flex-direction:column;flex:1;min-inline-size:var(--rsvp-field-min-w)} .rsvp-event-card{max-inline-size:var(--rsvp-max-w);inline-size:100%;margin:0 auto;padding:var(--space-sm);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);display:grid;gap:var(--space-xs)} .rsvp-event-card--wedding{padding-block:var(--space-md)} .rsvp-event-kicker{justify-self:center;padding:.2rem .65rem;border:1px solid var(--border-muted);border-radius:999px;background:var(--color-surface-muted);font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:var(--ls-slight);text-transform:uppercase;color:var(--color-text-muted)} .rsvp-event-title{margin:0;font-family:var(--font-display);font-size:var(--step-4);text-align:center} .rsvp-event-meta{margin:0;text-align:center;color:var(--color-text);font-size:var(--step-1)} .rsvp-event-copy{margin:0;text-align:center;color:var(--color-text-muted);font-size:var(--step-1)} .rsvp-memory-note{max-inline-size:42rem;margin:0 auto;padding:var(--space-2xs) var(--space-sm);border:1px solid var(--border-muted);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text);text-align:center;font-size:var(--step-1)} /* ===== Submit ===== */ .rsvp-event-form button[type="submit"]{font-family:var(--font-body);font-size:var(--rsvp-submit-fs);font-weight:var(--weight-bold);color:var(--btn-primary-color);appearance:none;display:inline-flex;align-items:center;justify-content:center;inline-size:auto;align-self:var(--rsvp-submit-align);min-block-size:var(--btn-h-md);padding:var(--btn-pad-y) var(--btn-pad-x);background:var(--btn-primary-bg);border-radius:var(--btn-radius);border:0;margin:var(--rsvp-submit-margin);cursor:pointer;transition:var(--transition-elevate),var(--transition-color);box-shadow:none} .rsvp-event-form button[type="submit"]:hover{background:var(--btn-primary-bg-hover);transform:translateY(-1px)} .rsvp-event-form button[type="submit"].is-loading{opacity:var(--rsvp-submit-loading-opacity);pointer-events:none} .rsvp-event-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none} /* ===== โ€œPlus oneโ€ note ===== */ .plusone-note{max-inline-size:var(--rsvp-plusone-max);margin:0 auto var(--rsvp-plusone-mb);padding:var(--rsvp-plusone-pad-y) var(--rsvp-plusone-pad-x);background:var(--rsvp-plusone-bg);border:var(--rsvp-plusone-border);border-radius:var(--rsvp-plusone-radius);color:var(--rsvp-plusone-color);text-align:center;box-shadow:var(--rsvp-plusone-shadow);font-size:var(--rsvp-plusone-fs)} /* ===== Success message ===== */ #rsvp-success-container{position:fixed;inset:0;z-index:1260;display:flex;justify-content:center;align-items:center;padding:var(--space-lg);background:color-mix(in srgb, var(--color-ink, #000) 24%, transparent);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-mid) var(--ease-standard),visibility var(--dur-mid) var(--ease-standard)} #rsvp-success-container.open{opacity:1;visibility:visible;pointer-events:auto} #rsvp-success{position:relative;display:grid;gap:var(--space-xs);font-weight:var(--weight-bold);opacity:0;transform:translateY(10px) scale(.98);background:var(--rsvp-success-bg);padding:calc(var(--space-md) + 1.5rem) var(--space-lg) var(--space-md);border-radius:var(--rsvp-success-radius);color:var(--rsvp-success-color);border:1px solid var(--rsvp-success-border-color);max-inline-size:min(32rem,100%);inline-size:min(32rem,100%);text-align:center;box-shadow:var(--shadow-lg);transition:var(--rsvp-success-transition)} #rsvp-success.visible{opacity:1;transform:none} #rsvp-success.error{background:var(--rsvp-success-error-bg);color:var(--rsvp-success-error-color);border-color:var(--rsvp-success-error-border-color)} #rsvp-success-close{position:absolute;top:var(--space-2xs);right:var(--space-2xs);appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:var(--weight-bold);padding:.35rem .55rem;border-radius:999px;cursor:pointer} #rsvp-success-close:hover,#rsvp-success-close:focus-visible{background:color-mix(in srgb, currentColor 10%, transparent);outline:none} #rsvp-success-message{font:inherit} body.rsvp-message-open{overflow:hidden} /* ===== Guided RSVP cards ===== */ .rsvp-form-return-slot{display:none} .rsvp-card-actions{display:flex;justify-content:center} .rsvp-card-launch{inline-size:min(100%,19rem)} .rsvp-card-summary{display:grid;gap:var(--space-sm);max-inline-size:42rem;margin:0 auto;padding:var(--space-sm);border:1px solid color-mix(in oklab,var(--border-muted),white 12%);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--card-bg),white 10%);box-shadow:var(--shadow-sm);text-align:left} .rsvp-card-summary[hidden]{display:none} .rsvp-card-summary__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid color-mix(in oklab,var(--border-muted),transparent 10%)} .rsvp-card-summary__eyebrow,.rsvp-card-summary__time,.rsvp-card-summary__label{margin:0} .rsvp-card-summary__eyebrow{font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)} .rsvp-card-summary__time{font-size:var(--step-1);color:var(--color-text-muted);text-align:right} .rsvp-card-summary__section{display:grid;gap:var(--space-3xs)} .rsvp-card-summary__label{font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);color:var(--color-text)} .rsvp-card-summary__list{margin:0;padding-left:1.1rem;display:grid;gap:var(--space-3xs);color:var(--color-text)} .rsvp-card-summary__list li{line-height:var(--lh-comfy)} /* ===== Guided RSVP overlay ===== */ #rsvp-wizard-overlay{position:fixed;inset:0;z-index:1240;display:grid;place-items:center;padding:var(--space-lg);background:color-mix(in srgb,var(--color-ink, #000) 26%,transparent);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-mid) var(--ease-standard),visibility var(--dur-mid) var(--ease-standard)} #rsvp-wizard-overlay:not([hidden]){opacity:1;visibility:visible;pointer-events:auto} .rsvp-wizard-dialog{position:relative;display:grid;gap:var(--space-md);inline-size:min(100%,54rem);max-block-size:min(90vh,56rem);overflow:auto;padding:calc(var(--space-lg) + 1.25rem) var(--space-lg) var(--space-lg);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow-lg),var(--card-sheen)} .rsvp-wizard-close{position:absolute;top:var(--space-sm);right:var(--space-sm);appearance:none;border:0;background:transparent;color:var(--color-text);font:inherit;font-weight:var(--weight-bold);padding:.4rem .7rem;border-radius:999px;cursor:pointer} .rsvp-wizard-close:hover,.rsvp-wizard-close:focus-visible{background:color-mix(in srgb,currentColor 10%,transparent);outline:none} .rsvp-wizard-head{display:grid;gap:var(--space-2xs);padding-right:3.5rem} .rsvp-wizard-kicker,.rsvp-wizard-meta,.rsvp-wizard-note,.rsvp-wizard-step-copy,.rsvp-wizard-progress__item{margin:0} .rsvp-wizard-kicker{font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .rsvp-wizard-title{margin:0;font-family:var(--font-display);font-size:clamp(1.7rem,1.15rem + 1.4vw,2.45rem);line-height:var(--lh-tight)} .rsvp-wizard-meta{font-size:var(--step-1);color:var(--color-text)} .rsvp-wizard-note{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-md);background:var(--color-surface-muted);font-size:var(--step-1);color:var(--color-text-muted)} .rsvp-wizard-progress{display:flex;flex-wrap:wrap;gap:var(--space-2xs)} .rsvp-wizard-progress__item{display:inline-flex;align-items:center;justify-content:center;min-block-size:2rem;padding:.35rem .75rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--border-muted),white 12%);background:rgba(255,255,255,.72);font-size:var(--step-0);font-weight:var(--weight-bold);color:var(--color-text-muted)} .rsvp-wizard-progress__item.is-active{background:color-mix(in oklab,var(--color-accent),white 76%);color:var(--color-text)} .rsvp-wizard-progress__item.is-complete{background:color-mix(in oklab,var(--color-action),white 72%);color:var(--color-text)} .rsvp-wizard-stage,.rsvp-wizard-form,.rsvp-wizard-steps,.rsvp-wizard-step,.rsvp-review-summary{display:grid;gap:var(--space-md)} .rsvp-wizard-step[hidden]{display:none} .rsvp-wizard-step-head{display:grid;gap:var(--space-3xs)} .rsvp-wizard-step-title{margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight)} .rsvp-wizard-step-copy{font-size:var(--step-1);color:var(--color-text-muted)} .rsvp-review-summary{padding:var(--space-sm);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--card-bg),white 8%);border:1px solid color-mix(in oklab,var(--border-muted),white 10%)} .rsvp-wizard-footer{display:flex;justify-content:flex-end;gap:var(--space-xs);flex-wrap:wrap} .rsvp-wizard-prev[hidden],.rsvp-wizard-next[hidden],.rsvp-wizard-submit[hidden]{display:none} body.rsvp-wizard-open{overflow:hidden} /* ===== Wedding menus overlay ===== */ body.wedding-menu-open{overflow:hidden} #wedding-menu-overlay{position:fixed;inset:0;z-index:1248;display:grid;place-items:center;padding:var(--space-lg);background:linear-gradient(180deg,rgba(73,61,48,.18),rgba(38,31,24,.34));backdrop-filter:blur(.45rem) saturate(108%)} #wedding-menu-overlay[hidden]{display:none} .wedding-menu-dialog{position:relative;display:grid;gap:var(--space-sm);inline-size:min(100%,34rem);max-block-size:min(92vh,60rem);overflow:auto;padding:var(--space-sm);background:linear-gradient(180deg,rgba(246,240,233,.92),rgba(234,225,216,.88));border:1px solid rgba(255,255,255,.34);box-shadow:0 1.25rem 2.8rem rgba(38,31,24,.18)} .wedding-menu-close{position:absolute;top:.35rem;right:.45rem;appearance:none;border:0;background:transparent;color:var(--color-text);font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;padding:.45rem .55rem;cursor:pointer} .wedding-menu-close:hover,.wedding-menu-close:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);outline:none} .wedding-menu-dialog__tools{display:flex;justify-content:flex-end;padding-right:3.75rem} .wedding-menu-print{min-block-size:auto;padding:.42rem .75rem;border-radius:.18rem;background:rgba(255,255,255,.78);box-shadow:none;font-family:var(--font-body);font-size:var(--step-0);letter-spacing:.14em;text-transform:uppercase} .wedding-menu-sheet{position:relative;display:grid;gap:1.1rem;inline-size:min(100%,23rem);margin:0 auto;padding:2.4rem 1.55rem 2.1rem;background:linear-gradient(180deg,#fffefd,#fbf7f2);text-align:center;box-shadow:0 1rem 2.2rem rgba(62,52,35,.14),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden} .wedding-menu-sheet::before,.wedding-menu-sheet::after{content:"";position:absolute;pointer-events:none} .wedding-menu-sheet::before{inset:.72rem;border:1.5px solid color-mix(in oklab,var(--color-text),white 20%)} .wedding-menu-sheet::after{inset:1.02rem;border:1px solid color-mix(in oklab,var(--color-text),white 48%);opacity:.7} .wedding-menu-sheet__watermark{position:absolute;inset:3.5rem 0 auto;z-index:0;font-family:var(--font-display);font-size:11rem;line-height:.82;color:rgba(62,52,35,.05);letter-spacing:.02em;pointer-events:none} .wedding-menu-sheet__crest,.wedding-menu-sheet__title,.wedding-menu-sheet__eyebrow,.wedding-menu-sheet__meta,.wedding-menu-sheet__note,.wedding-menu-section__title,.wedding-menu-item__separator,.wedding-menu-item__name,.wedding-menu-item__blurb,.wedding-menu-item__copy{position:relative;z-index:1;margin:0} .wedding-menu-sheet__crest{justify-self:center;inline-size:3.7rem;block-size:auto;opacity:.9;filter:grayscale(.18) saturate(.78) brightness(1.02)} .wedding-menu-sheet__title{font-family:var(--font-body);font-size:clamp(1.95rem,1.55rem + .95vw,2.4rem);font-weight:var(--weight-medium);letter-spacing:.13em;line-height:1.02;text-transform:uppercase} .wedding-menu-sheet__eyebrow{font-family:var(--font-display);font-size:clamp(1.25rem,1.02rem + .7vw,1.55rem);line-height:1.02;color:color-mix(in oklab,var(--color-text),white 20%)} .wedding-menu-sheet__meta{max-inline-size:18rem;justify-self:center;font-family:var(--font-body);font-size:.78rem;font-weight:var(--weight-bold);letter-spacing:.16em;line-height:1.45;text-transform:uppercase;color:color-mix(in oklab,var(--color-text),white 8%)} .wedding-menu-sheet__note{max-inline-size:16rem;justify-self:center;font-family:var(--font-body-i);font-size:var(--step-0);line-height:1.45;color:var(--color-text-muted)} .wedding-menu-sections{display:grid;gap:1.7rem} .wedding-menu-section{display:grid;gap:.8rem} .wedding-menu-section + .wedding-menu-section{padding-top:.2rem} .wedding-menu-section__title{font-family:var(--font-body);font-size:clamp(1.35rem,1.14rem + .55vw,1.62rem);font-weight:var(--weight-medium);letter-spacing:.12em;line-height:1.05;text-transform:uppercase;color:var(--color-text)} .wedding-menu-item-list{display:grid;gap:1rem} .wedding-menu-item{display:grid;gap:.2rem} .wedding-menu-item__separator{font-family:var(--font-body);font-size:.72rem;font-weight:var(--weight-bold);letter-spacing:.18em;line-height:1.2;text-transform:uppercase;color:var(--color-text-muted)} .wedding-menu-item__name{font-family:var(--font-body-i);font-size:clamp(1.18rem,1.02rem + .42vw,1.42rem);font-weight:var(--weight-medium);letter-spacing:.01em;line-height:1.14;color:var(--color-text)} .wedding-menu-item__blurb{max-inline-size:15.8rem;justify-self:center;font-family:var(--font-body-i);font-size:1rem;line-height:1.35;color:color-mix(in oklab,var(--color-text),white 28%);text-transform:none} .wedding-menu-item__copy{max-inline-size:15.5rem;justify-self:center;font-family:var(--font-body);font-size:.84rem;font-weight:var(--weight-bold);letter-spacing:.15em;line-height:1.55;text-transform:uppercase;color:color-mix(in oklab,var(--color-text),white 14%)} body.wedding-map-open{overflow:hidden} #wedding-map-overlay{position:fixed;inset:0;z-index:1247;display:grid;place-items:center;padding:var(--space-lg);background:linear-gradient(180deg,rgba(73,61,48,.14),rgba(38,31,24,.32));backdrop-filter:blur(.4rem) saturate(106%)} #wedding-map-overlay[hidden]{display:none} .wedding-map-dialog{position:relative;display:grid;gap:var(--space-sm);inline-size:min(100%,78rem);max-block-size:min(94vh,78rem);padding:var(--space-sm);background:linear-gradient(180deg,rgba(246,240,233,.92),rgba(234,225,216,.88));border:1px solid rgba(255,255,255,.34);box-shadow:0 1.25rem 2.8rem rgba(38,31,24,.18)} .wedding-map-close{position:absolute;top:.45rem;right:.55rem;appearance:none;border:0;background:transparent;color:var(--color-text);font-family:var(--font-body);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;padding:.45rem .55rem;cursor:pointer;z-index:6} .wedding-map-close:hover,.wedding-map-close:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);outline:none} .home-venue-map-scene--overlay{inline-size:min(100%,74rem);max-inline-size:100%;min-block-size:min(82vh,52rem);margin:0 auto} .home-venue-map-scene--overlay .home-venue-map-detail{inset:auto 1rem 1rem 1rem} @media (max-width:37.5em){ #wedding-menu-overlay{padding:var(--space-sm)} .wedding-menu-dialog{inline-size:min(100%,100vw);padding:var(--space-xs)} .wedding-menu-dialog__tools{padding-right:3.1rem} .wedding-menu-print{min-inline-size:0} #wedding-map-overlay{padding:var(--space-sm)} .wedding-map-dialog{inline-size:min(100%,100vw);padding:var(--space-xs)} .home-venue-map-scene--overlay{min-block-size:min(78vh,38rem)} .wedding-menu-sheet{inline-size:min(100%,21rem);padding:2rem 1.1rem 1.8rem} .wedding-menu-sheet__watermark{font-size:8rem;inset:4rem 0 auto} .wedding-menu-sheet__meta,.wedding-menu-item__blurb,.wedding-menu-item__copy{max-inline-size:14rem} } @media print{ body.wedding-menu-open > :not(#wedding-menu-overlay){display:none!important} body.wedding-menu-open #wedding-menu-overlay{position:static;inset:auto;display:block!important;padding:0;background:none;backdrop-filter:none} body.wedding-menu-open .wedding-menu-dialog{inline-size:100%;max-block-size:none;overflow:visible;padding:0;background:none;box-shadow:none!important;border:0!important} body.wedding-menu-open .wedding-menu-dialog__tools, body.wedding-menu-open .wedding-menu-close{display:none!important} body.wedding-menu-open .wedding-menu-sheet{inline-size:4.85in;max-inline-size:none;min-block-size:9.6in;padding:.7in .48in .6in;box-shadow:none;break-inside:avoid;page-break-inside:avoid} body.wedding-menu-open .wedding-menu-sheet__watermark{font-size:8.5rem} } /* ===== Read-only RSVP summary ===== */ .rsvp-portal-summary{ inline-size: var(--inline-md); margin: var(--space-sm) auto var(--space-sm); padding: var(--space-xs) var(--space-sm); display: grid; gap: var(--space-2xs); text-align: center; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); transition: var(--transition-elevate); } .rsvp-portal-summary .summary-grid{display:grid;grid-template-columns:1fr;gap:var(--space-xs)} .rsvp-portal-summary .line{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);flex-wrap:wrap} .rsvp-portal-summary .summary-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)} .rsvp-portal-summary .summary-stat,.rsvp-portal-summary .summary-block{display:grid;gap:var(--space-3xs)} .rsvp-portal-summary .summary-stat{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--border-muted);border-radius:var(--radius-md);background:var(--card-bg-muted)} .rsvp-portal-summary .summary-block{text-align:left} .rsvp-portal-summary .label{font-family:var(--font-body);font-size:var(--step-2);font-weight:var(--weight-bold);letter-spacing:var(--ls-subtle);color:var(--on-surface)} .rsvp-portal-summary .value{font-family:var(--font-body-i);font-size:var(--step-2);color:var(--on-surface)} .rsvp-portal-summary .summary-pill-list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);justify-content:flex-start} .rsvp-portal-summary .summary-name,.rsvp-portal-summary .summary-event,.rsvp-portal-summary .summary-value-empty{display:inline-flex;align-items:center;justify-content:center;padding:var(--chip-pad-y) var(--chip-pad-x);border-radius:var(--chip-radius);font-size:var(--step-1);border:var(--chip-outline-border);background:var(--color-surface-muted);color:var(--color-text)} .rsvp-portal-summary .summary-event{background:var(--chip-filled-bg);color:var(--chip-filled-color)} .rsvp-portal-summary .code-pill{font-size:var(--step-2);font-weight:var(--weight-bold);letter-spacing:var(--ls-slight);background:var(--chip-filled-bg);color:var(--chip-filled-color);border:var(--chip-outline-border);border-radius:var(--chip-radius);padding:var(--chip-pad-y) var(--chip-pad-x);box-shadow:var(--chip-shadow)} .rsvp-portal-summary .hint{margin:var(--space-2xs) 0 0;font-family:var(--font-body);font-size:var(--step-1);color:var(--color-text-muted)} @media (max-width:56.25em){ [data-page="rsvp"]{ --rsvp-title-mb: var(--space-xs); --rsvp-instructions-fs: var(--step-2); --rsvp-ctl-h: var(--btn-h-sm); --rsvp-field-min-w: 0; --rsvp-plusone-max: 100%; --rsvp-submit-margin: var(--space-md) 0 var(--space-xl); } .rsvp-portal-summary{inline-size:var(--inline-sm)} .rsvp-portal-summary .summary-stats{grid-template-columns:1fr} .rsvp-card-summary__head{display:grid} .rsvp-card-summary__time{text-align:left} .rsvp-wizard-dialog{inline-size:min(100%,46rem);padding:calc(var(--space-md) + 1.35rem) var(--space-md) var(--space-md)} .rsvp-event-form .guest-row{ grid-template-columns: 1fr 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "name attend remove" "email email remove" "meal meal remove"; align-items:center; grid-auto-flow:dense; row-gap: var(--space-3xs); } .rsvp-event-form .guest-row:not(:has(.remove-guest-button)){ grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "name attend" "email email" "meal meal"; } .rsvp-event-form .guest-row--simple:not(:has(.remove-guest-button)){ grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "name attend"; } .rsvp-event-form .guest-row .field-col:nth-child(1){grid-area:name} .rsvp-event-form .guest-row .field-col:nth-child(2){grid-area:attend} .rsvp-event-form .guest-row .field-col:nth-child(3){grid-area:email} .rsvp-event-form .guest-row .field-col:nth-child(4){grid-area:meal} .rsvp-event-form .guest-row .remove-guest-button{grid-area:remove;grid-row:1 / span 3;align-self:center} .rsvp-event-form .guest-row .field-col{min-inline-size:0} .rsvp-event-form .guest-row :is(input,select){min-inline-size:0;inline-size:100%} } @media (max-width:37.5em){ [data-page="rsvp"]{ --rsvp-row-gap: var(--space-3xs); --rsvp-label-fs: .9rem; --rsvp-guest-input-fs: var(--step-1); --rsvp-ctl-h: var(--btn-h-lg); } #rsvp-wizard-overlay{padding:var(--space-sm)} .rsvp-card-launch,.rsvp-wizard-footer .button{inline-size:100%} .rsvp-wizard-head{padding-right:0} .rsvp-wizard-footer{flex-direction:column-reverse} } /* ================================================ โœˆ๏ธ Travel ================================================ */ /* ================================================ Games Lounge ================================================ */ [data-page="games"]{container-type:inline-size;container-name:games;--games-inline:var(--container-lg);--games-grid-gap:var(--space-lg);--games-shell-pad-y:var(--space-md);--games-shell-pad-x:var(--space-lg);--games-panel-gap:var(--space-lg);--games-chip-ready-bg:rgba(255,255,255,.74);--games-chip-active-bg:color-mix(in oklab,var(--color-accent),white 76%);--games-chip-complete-bg:color-mix(in oklab,var(--color-action),white 70%);--games-chip-warning-bg:color-mix(in oklab,#e3c59b,white 58%)} .games-page{position:relative;display:grid;gap:var(--space-xl);background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 82%,var(--color-bg)) 0%,color-mix(in oklab,var(--color-surface-muted) 44%,transparent) 100%);overflow:hidden;isolation:isolate} .games-page::before,.games-page::after{content:"";position:absolute;inline-size:22rem;block-size:22rem;border-radius:50%;pointer-events:none;z-index:-1;opacity:.52} .games-page::before{top:-5rem;right:-5rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 22%,transparent),transparent 70%)} .games-page::after{bottom:-6rem;left:-5rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-action) 22%,transparent),transparent 70%)} .games-hero{max-inline-size:49rem} .games-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:var(--games-grid-gap);inline-size:min(100%,var(--games-inline));margin:0 auto} .games-highlight,.games-summary,.games-shell{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow),var(--card-sheen)} .games-highlight{display:grid;gap:var(--space-2xs);padding:var(--card-pad-y) var(--card-pad-x)} .games-highlight h3,.games-summary h3{margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight);color:var(--color-text)} .games-highlight p,.games-summary p{margin:0;color:var(--color-text);line-height:var(--lh-comfy)} .games-highlight__eyebrow,.games-summary__eyebrow,.either-kicker,.connections-note,.mini-crossword-note{margin:0;font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .games-summary{display:grid;gap:var(--space-sm);inline-size:min(100%,var(--games-inline));margin:0 auto;padding:var(--card-pad-y) var(--card-pad-x)} .games-summary-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);align-items:start} .games-summary__count{margin:0;align-self:start;padding:.42rem .8rem;border-radius:var(--radius-pill);border:1px solid color-mix(in oklab,var(--border-muted),white 18%);background:rgba(255,255,255,.7);font-size:var(--step-0);font-weight:var(--weight-bold);box-shadow:var(--shadow-sm)} .games-summary-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.45rem} .games-summary-pill{display:inline-flex;align-items:center;justify-content:center;min-block-size:2.1rem;padding:.38rem .7rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--border-muted),white 18%);background:var(--games-chip-ready-bg);font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.01em;box-shadow:var(--shadow-sm)} .games-summary-pill.is-ready{background:var(--games-chip-ready-bg)} .games-summary-pill.is-active{background:var(--games-chip-active-bg)} .games-summary-pill.is-complete{background:var(--games-chip-complete-bg)} .games-summary-pill.is-warning{background:var(--games-chip-warning-bg)} .games-panel{display:grid;gap:var(--space-md);scroll-margin-top:var(--anchor-scroll-offset)} .games-panel + .games-panel{padding-top:var(--space-lg);border-top:1px solid color-mix(in oklab,var(--border-muted),transparent 14%)} .games-panel-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);align-items:start;inline-size:min(100%,var(--games-inline));margin:0 auto} .games-panel-head .page-section-head{margin:0} .games-panel-tools{position:relative;display:grid;justify-items:end;gap:var(--space-xs)} .games-help{position:relative} .games-help[open]{z-index:3} .games-help__button{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-block-size:2.2rem;padding:.45rem .9rem;border:1px solid color-mix(in oklab,var(--border-muted),white 18%);border-radius:999px;background:rgba(255,255,255,.76);box-shadow:var(--shadow-sm);font-size:var(--step-1);font-weight:var(--weight-bold);cursor:pointer;transition:var(--transition-color),var(--transition-elevate)} .games-help__button::-webkit-details-marker{display:none} .games-help__button::marker{content:""} .games-help__button:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--color-accent),white 82%)} .games-help__button:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--shadow-sm)} .games-help__panel{position:absolute;top:calc(100% + .5rem);right:0;inline-size:min(20rem,86vw);display:grid;gap:.45rem;padding:var(--space-sm) var(--space-md);border:var(--card-border);border-radius:var(--card-radius);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,242,235,.96));box-shadow:var(--shadow-lg)} .games-help__title{margin:0;font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-tight);color:var(--color-text)} .games-help__panel p{margin:0;color:var(--color-text);font-size:var(--step-1);line-height:var(--lh-normal)} .games-shell{inline-size:min(100%,var(--games-inline));margin:0 auto;padding:var(--games-shell-pad-y) var(--games-shell-pad-x)} .games-shell--crossword{display:grid;grid-template-columns:minmax(17rem,24rem) minmax(0,1fr);gap:var(--games-panel-gap);align-items:start} .mini-crossword-stage{display:grid;gap:var(--space-sm);justify-items:center} .mini-crossword-meta{display:grid;gap:.35rem;justify-items:center;text-align:center} .mini-crossword-playfield{position:relative;display:grid;justify-items:center} .mini-crossword-levels,.connections-levels,.weddle-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem} .mini-crossword-level,.connections-level,.weddle-level{border:1px solid color-mix(in oklab,var(--border-muted),white 12%);border-radius:999px;padding:.5rem .85rem;background:rgba(255,255,255,.72);color:var(--color-text);font:inherit;font-size:var(--step-0);line-height:1.1;cursor:pointer;transition:var(--transition-color),var(--transition-elevate)} .mini-crossword-level:hover,.mini-crossword-level.is-active,.connections-level:hover,.connections-level.is-active,.weddle-level:hover,.weddle-level.is-active{transform:translateY(-1px);background:color-mix(in oklab,var(--color-accent),white 80%)} .mini-crossword-level.is-active,.connections-level.is-active,.weddle-level.is-active{border-color:color-mix(in oklab,var(--color-accent),black 4%)} .mini-crossword-level.is-solved,.connections-level.is-solved,.weddle-level.is-solved{background:color-mix(in oklab,var(--color-action),white 84%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .mini-crossword-level.is-active.is-solved,.connections-level.is-active.is-solved,.weddle-level.is-active.is-solved{background:color-mix(in oklab,var(--color-action),white 78%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .connections-level.is-failed,.weddle-level.is-failed{background:color-mix(in oklab,var(--bg-error),white 18%);border-color:var(--border-error)} .connections-level.is-active.is-failed,.weddle-level.is-active.is-failed{background:color-mix(in oklab,var(--bg-error),white 12%);border-color:var(--border-error)} .mini-crossword-level-title,.connections-level-title,.weddle-level-title{margin:0;font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-tight);color:var(--color-text)} .mini-crossword-status,.connections-status,.weddle-status{position:absolute;top:50%;left:50%;z-index:3;max-inline-size:min(calc(100% - 1.5rem),21rem);margin:0;padding:.65rem 1rem;border-radius:999px;background:rgba(41,31,27,.92);box-shadow:var(--shadow-md);font-size:var(--step-0);font-weight:var(--weight-bold);line-height:1.2;color:#fff;text-align:center;opacity:0;transform:translate(-50%,-56%);pointer-events:none;transition:opacity var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-standard)} .mini-crossword-status.is-visible,.connections-status.is-visible,.weddle-status.is-visible{opacity:1;transform:translate(-50%,-50%)} .mini-crossword-status:empty,.connections-status:empty,.weddle-status:empty{display:none} .mini-crossword-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.24rem;inline-size:min(100%,20rem);padding:.35rem;border-radius:calc(var(--card-radius) - .1rem);background:color-mix(in oklab,var(--color-text),white 86%);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--border-muted),white 12%)} .mini-crossword-grid.is-solved{background:color-mix(in oklab,var(--color-action),white 68%);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-action),black 12%)} .mini-crossword-cell{position:relative;aspect-ratio:1/1;min-block-size:3.2rem;border-radius:.55rem;background:rgba(255,255,255,.92);border:1px solid color-mix(in oklab,var(--border-muted),white 10%);box-shadow:var(--shadow-sm);transition:var(--transition-color),var(--transition-elevate)} .mini-crossword-cell input{inline-size:100%;block-size:100%;border:0;background:transparent;padding:0;text-align:center;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:clamp(1.2rem,3.8vw,1.7rem);font-weight:700;text-transform:uppercase;color:var(--color-text);caret-color:transparent;cursor:default} .mini-crossword-cell input:focus{box-shadow:none} .mini-crossword-cell__number{position:absolute;top:.28rem;left:.35rem;font-size:.68rem;line-height:1;color:var(--color-text-muted);font-weight:var(--weight-bold)} .mini-crossword-cell--block{background:color-mix(in oklab,var(--color-text),black 8%);border-color:transparent;box-shadow:none} .mini-crossword-cell.is-entry-active{background:color-mix(in oklab,var(--color-accent),white 82%)} .mini-crossword-cell.is-active{transform:translateY(-1px);background:color-mix(in oklab,var(--color-action),white 72%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .mini-crossword-cell.is-wrong{background:color-mix(in oklab,var(--bg-error),white 10%);border-color:var(--border-error)} .mini-crossword-cell.is-solved{background:color-mix(in oklab,var(--color-action),white 72%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .mini-crossword-cell.is-solved input{color:color-mix(in oklab,var(--color-text),black 4%)} .mini-crossword-cell.is-solved .mini-crossword-cell__number{color:color-mix(in oklab,var(--color-text-muted),var(--color-action) 24%)} .mini-crossword-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .mini-crossword-clues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)} .mini-crossword-clue-group{display:grid;gap:var(--space-xs)} .mini-crossword-clue-group h3,.either-prompt{margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight)} .mini-crossword-clue-group ol{display:grid;gap:.45rem;margin:0;padding:0;list-style:none} .mini-crossword-clue{inline-size:100%;display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;border:0;border-radius:var(--radius-md);padding:.55rem .7rem;background:rgba(255,255,255,.62);color:var(--color-text);font:inherit;text-align:left;cursor:pointer;transition:var(--transition-color),var(--transition-elevate)} .mini-crossword-clue:hover,.mini-crossword-clue.is-active{background:color-mix(in oklab,var(--color-accent),white 80%);transform:translateY(-1px)} .mini-crossword-clue__number{font-weight:var(--weight-bold);color:var(--color-text-muted)} .games-shell--connections{display:grid;gap:var(--space-md)} .connections-topline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);align-items:start} .connections-meta{display:grid;gap:.35rem} .connections-playfield{position:relative;display:grid;gap:var(--space-sm)} .connections-mistake-block{display:grid;gap:.3rem;justify-items:end} .connections-mistake-label{font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)} .connections-mistakes{display:flex;gap:.35rem} .connections-mistake-dot{inline-size:.9rem;block-size:.9rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--border-muted),white 15%)} .connections-mistake-dot.is-available{background:color-mix(in oklab,var(--color-action),white 24%)} .connections-mistake-dot.is-used{background:color-mix(in oklab,var(--color-accent),white 22%)} .connections-groups{display:grid;gap:var(--space-sm)} .connections-group{display:grid;gap:.2rem;padding:var(--space-sm) var(--space-md);border-radius:var(--card-radius);border:1px solid color-mix(in oklab,var(--border-muted),white 12%);box-shadow:var(--shadow-sm)} .connections-group__title{margin:0;font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase} .connections-group__words{margin:0;color:var(--color-text)} .connections-group--yellow{background:linear-gradient(180deg,#f7eac0,#f4df9a)} .connections-group--green{background:linear-gradient(180deg,#dce8bf,#c5d7a4)} .connections-group--blue{background:linear-gradient(180deg,#d5e4ed,#bdd4e3)} .connections-group--purple{background:linear-gradient(180deg,#e5d9e6,#d3c0d5)} .connections-group.is-revealed{opacity:.82} .connections-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xs)} .connections-card,.either-option{font:inherit;font-weight:var(--weight-bold);cursor:pointer;transition:var(--transition-color),var(--transition-elevate),transform var(--dur-fast) var(--ease-standard)} .connections-card{min-block-size:4.4rem;padding:.8rem .55rem;border-radius:var(--radius-lg);border:1px solid color-mix(in oklab,var(--border-muted),white 12%);background:rgba(255,255,255,.86);color:var(--color-text);box-shadow:var(--shadow-sm);text-transform:uppercase;letter-spacing:.04em} .connections-card:hover,.connections-card.is-selected{transform:translateY(-1px)} .connections-card.is-selected{background:color-mix(in oklab,var(--color-accent),white 70%);border-color:color-mix(in oklab,var(--color-accent),black 4%)} .connections-complete{padding:var(--space-md);border-radius:var(--card-radius);background:color-mix(in oklab,var(--color-surface-muted),white 18%);border:1px dashed color-mix(in oklab,var(--border-muted),white 10%);text-align:center;color:var(--color-text)} .connections-actions{display:flex;flex-wrap:wrap;gap:var(--space-xs)} .games-shell--trivia,.games-shell--weddle{display:grid;gap:var(--space-md)} .either-topline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs)} .either-progress,.either-score{margin:0;font-size:var(--step-1);font-weight:var(--weight-bold);color:var(--color-text-muted)} .either-card{display:grid;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--card-radius);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,242,235,.94));border:1px solid color-mix(in oklab,var(--border-muted),white 12%);box-shadow:var(--shadow-sm)} .either-feedback{margin:0;color:var(--color-text)} .either-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)} .either-option{display:flex;align-items:center;justify-content:center;min-block-size:7rem;padding:var(--space-md);border-radius:var(--radius-lg);border:1px solid color-mix(in oklab,var(--border-muted),white 12%);background:rgba(255,255,255,.84);color:var(--color-text);box-shadow:var(--shadow-sm);text-align:center} .either-option:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--color-accent),white 86%)} .either-option.is-correct{background:color-mix(in oklab,var(--color-action),white 72%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .either-option.is-wrong{background:color-mix(in oklab,var(--bg-error),white 10%);border-color:var(--border-error)} .either-option:disabled{cursor:default} .either-actions{display:flex;flex-wrap:wrap;gap:var(--space-xs)} .weddle-topline{display:grid;gap:.35rem;justify-items:center;text-align:center} .weddle-playfield{position:relative;display:grid;justify-items:center} .weddle-board{display:grid;gap:.35rem;inline-size:min(100%,20rem);justify-self:center} .weddle-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem} .weddle-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-block-size:3rem;border-radius:.78rem;border:1px solid color-mix(in oklab,var(--border-muted),white 12%);background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:clamp(1.25rem,4vw,1.65rem);font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.06em;transition:var(--transition-color),var(--transition-elevate)} .weddle-tile.is-filled{background:color-mix(in oklab,var(--color-accent),white 84%);border-color:color-mix(in oklab,var(--color-accent),white 22%)} .weddle-tile.is-next{border-color:color-mix(in oklab,var(--color-text),white 30%);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-text),white 32%),var(--shadow-sm)} .weddle-tile.is-correct{background:color-mix(in oklab,var(--color-action),white 58%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .weddle-tile.is-present{background:linear-gradient(180deg,rgba(247,236,191,.98),rgba(242,221,143,.95));border-color:#d3b75b} .weddle-tile.is-absent{background:color-mix(in oklab,var(--color-text),white 74%);border-color:color-mix(in oklab,var(--color-text),white 56%);color:rgba(41,31,27,.84)} .weddle-actions{display:flex;justify-content:center;gap:var(--space-xs)} .weddle-keyboard{display:grid;gap:.4rem;inline-size:min(100%,27rem);justify-self:center} .weddle-keyboard-row{display:flex;justify-content:center;gap:.35rem} .weddle-key{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-block-size:3rem;padding:.55rem .35rem;border:1px solid color-mix(in oklab,var(--border-muted),white 12%);border-radius:.9rem;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);color:var(--color-text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--step-1);font-weight:700;text-transform:uppercase;cursor:pointer;transition:var(--transition-color),var(--transition-elevate)} .weddle-key:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--color-accent),white 84%)} .weddle-key.is-correct{background:color-mix(in oklab,var(--color-action),white 62%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .weddle-key.is-present{background:linear-gradient(180deg,rgba(247,236,191,.98),rgba(242,221,143,.95));border-color:#d3b75b} .weddle-key.is-absent{background:color-mix(in oklab,var(--color-text),white 76%);border-color:color-mix(in oklab,var(--color-text),white 58%);color:rgba(41,31,27,.84)} .weddle-key.is-solved{background:color-mix(in oklab,var(--color-action),white 62%);border-color:color-mix(in oklab,var(--color-action),black 6%)} .weddle-key:disabled{opacity:1;cursor:default;transform:none} .weddle-key--wide{flex:1.45 1 0;font-size:var(--step-0);letter-spacing:.04em} @supports not (color: color-mix(in oklab, black, white)){ [data-page="games"]{ --games-chip-active-bg:#f2e4d5; --games-chip-complete-bg:#dce6cb; --games-chip-warning-bg:#f1dfc8; } .games-help__button:hover{background:#f4eadf} .mini-crossword-grid{background:#d9d2c8;box-shadow:inset 0 0 0 1px rgba(103,88,73,.18)} .mini-crossword-grid.is-solved{background:#d6e3c5;box-shadow:inset 0 0 0 1px rgba(113,142,91,.22)} .mini-crossword-cell{border-color:rgba(103,88,73,.16)} .mini-crossword-cell.is-entry-active{background:#f3e7d9} .mini-crossword-cell.is-active{background:#dfe8cf;border-color:#9eb17f} .mini-crossword-cell.is-wrong{background:#f6e4e1;border-color:#c99898} .mini-crossword-cell.is-solved{background:#dfe8cf;border-color:#9eb17f} .mini-crossword-level,.connections-level,.weddle-level{border-color:rgba(103,88,73,.16)} .mini-crossword-level:hover,.mini-crossword-level.is-active,.connections-level:hover,.connections-level.is-active,.weddle-level:hover,.weddle-level.is-active{background:#f3e7d9} .mini-crossword-level.is-solved,.connections-level.is-solved,.weddle-level.is-solved{background:#e0ead1;border-color:#9eb17f} .mini-crossword-level.is-active.is-solved,.connections-level.is-active.is-solved,.weddle-level.is-active.is-solved{background:#d8e5c7;border-color:#9eb17f} .connections-level.is-failed,.weddle-level.is-failed{background:#f3d9d5;border-color:#d18f86} .connections-level.is-active.is-failed,.weddle-level.is-active.is-failed{background:#efcfc9;border-color:#d18f86} .mini-crossword-clue:hover,.mini-crossword-clue.is-active{background:#f3e7d9} .connections-card.is-selected{background:#eadfce;border-color:#ceb8a2} .connections-complete{background:#f1ece5;border-color:#c7b7a5} .either-option:hover{background:#f4eadf} .either-option.is-correct{background:#dfe8cf;border-color:#9eb17f} .either-option.is-wrong{background:#f6e4e1;border-color:#c99898} .weddle-tile.is-filled{background:#f3e7d9;border-color:#dac1a5} .weddle-tile.is-next{border-color:#8d7b6c;box-shadow:inset 0 0 0 1px rgba(103,88,73,.28),var(--shadow-sm)} .weddle-tile.is-correct{background:#dfe8cf;border-color:#9eb17f} .weddle-tile.is-present{background:#f3e2a8;border-color:#d3b75b} .weddle-tile.is-absent{background:#d8d0c7;border-color:#b8aba0} .weddle-key:hover{background:#f4eadf} .weddle-key.is-correct{background:#dfe8cf;border-color:#9eb17f} .weddle-key.is-present{background:#f3e2a8;border-color:#d3b75b} .weddle-key.is-absent{background:#d8d0c7;border-color:#b8aba0} .weddle-key.is-solved{background:#dfe8cf;border-color:#9eb17f} } @media (max-width:56.25em){ [data-page="games"]{--games-shell-pad-x:var(--space-md);--games-panel-gap:var(--space-md)} .games-panel-head,.games-summary-head,.connections-topline{grid-template-columns:1fr} .games-panel-tools{justify-items:start} .games-help__panel{left:0;right:auto} .games-summary__count{justify-self:start} .games-shell--crossword{grid-template-columns:1fr} .mini-crossword-stage{justify-items:start} .mini-crossword-meta{text-align:left;justify-items:start} .mini-crossword-levels,.connections-levels,.weddle-levels{justify-content:flex-start} .mini-crossword-clues{grid-template-columns:1fr} } @media (max-width:37.5em){ [data-page="games"]{--games-grid-gap:var(--space-sm);--games-shell-pad-y:var(--space-sm);--games-shell-pad-x:var(--space-sm)} .games-page::before,.games-page::after{inline-size:16rem;block-size:16rem} .games-highlights{grid-template-columns:1fr} .connections-board{grid-template-columns:repeat(2,minmax(0,1fr))} .connections-card{min-block-size:4rem;font-size:.9rem} .either-options{grid-template-columns:1fr} .either-option{min-block-size:5.5rem} .weddle-board{inline-size:min(100%,18rem)} .weddle-key{min-block-size:2.8rem;padding:.5rem .25rem;font-size:var(--step-0)} .weddle-keyboard-row{gap:.25rem} .weddle-key--wide{flex:1.25 1 0} } [data-page="travel"]{container-type:inline-size;container-name:travel;--map-inline:100%;--map-h:26rem;--map-radius:var(--radius-lg);--map-border-w:1px;--map-border-color:color-mix(in oklab,var(--border-muted),transparent 15%);--travel-inline:var(--inline-lg);--travel-section-mt:var(--space-2xl);--travel-section-pad-x:var(--space-lg);--travel-card-min:16rem;--travel-card-gap:var(--space-lg);--travel-name-fs:var(--step-3);--travel-body-fs:var(--step-2);--travel-distance-fs:var(--step-1);--travel-callout-max:56rem;--travel-callout-pad-y:var(--space-md);--travel-callout-pad-x:var(--space-lg);--travel-callout-title-fs:var(--step-4);--ribbon-offset-y:-12px;--ribbon-offset-x:-4px;--ribbon-fs:var(--step-1);--travel-btn-mt:var(--space-2xs);--travel-hero-max:48rem;--travel-surface:color-mix(in oklab,var(--color-surface) 78%,var(--color-surface-muted));--travel-chip-active-bg:var(--color-action);--travel-chip-active-color:var(--on-action)} .travel-page{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 82%,var(--color-bg)) 0%,color-mix(in oklab,var(--color-surface-muted) 38%,transparent) 100%);isolation:isolate} .travel-page::before,.travel-page::after{content:"";position:absolute;inset:auto auto 0 0;inline-size:22rem;block-size:22rem;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 24%,transparent),transparent 68%);opacity:.55;pointer-events:none;z-index:-1} .travel-page::after{inset:0 0 auto auto;background:radial-gradient(circle,color-mix(in oklab,var(--color-action) 24%,transparent),transparent 70%)} .travel-hero{max-inline-size:var(--travel-hero-max);margin:0 auto var(--space-lg);display:grid;justify-items:center;gap:var(--space-xs);text-align:center} .travel-eyebrow,.travel-callout__eyebrow,.travel-card__eyebrow{font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .travel-eyebrow{margin:0} .travel-intro{max-inline-size:42rem;margin:0 auto} .travel-jump-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .travel-chip{text-decoration:none!important;background:color-mix(in oklab,var(--color-surface) 85%,transparent);transition:var(--transition-color),var(--transition-elevate)} .travel-chip.is-active,.travel-chip:hover{background:var(--travel-chip-active-bg);color:var(--travel-chip-active-color);border-color:transparent} .travel-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .travel-actions--center{margin-top:var(--space-sm)} .travel-copy-feedback{min-block-size:1.4em;margin:0;color:var(--color-text-muted);font-size:var(--step-1)} .travel-block-shell{display:grid;gap:var(--space-lg);inline-size:min(100%,var(--travel-inline));margin:0 auto var(--space-xl);padding:var(--card-pad-y) var(--card-pad-x);background:var(--travel-surface)} .travel-block-head{max-inline-size:44rem} .travel-block-head h3{margin:.2rem 0 var(--space-xs);font-family:var(--font-display);font-size:var(--travel-callout-title-fs);line-height:var(--lh-tight)} .travel-block-copy{margin:0 0 var(--space-xs);font-size:var(--travel-body-fs);color:var(--color-text)} .travel-callout{background:var(--travel-surface);border:var(--card-border);padding:var(--travel-callout-pad-y) var(--travel-callout-pad-x);margin:0 auto;inline-size:min(100%,var(--travel-callout-max));border-radius:var(--radius-md);text-align:left;box-shadow:var(--card-shadow)} .travel-callout h3{margin:.2rem 0 var(--space-xs);font-family:var(--font-display);font-size:var(--travel-callout-title-fs);line-height:var(--lh-tight)} .travel-callout p{font-family:var(--font-body);font-size:var(--travel-body-fs);color:var(--color-text);margin:0 0 var(--space-xs)} .travel-checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)} .travel-checklist li{padding:0 0 var(--space-xs) 1.15rem;position:relative;border-bottom:1px dashed color-mix(in oklab,var(--border-muted),transparent 10%)} .travel-checklist li:last-child{padding-bottom:0;border-bottom:0} .travel-checklist li::before{content:"";position:absolute;left:0;top:.7em;inline-size:.42rem;block-size:.42rem;border-radius:50%;background:var(--color-action)} .hotel-chooser{display:grid;grid-template-columns:1fr;gap:var(--space-2xs);margin:var(--space-sm) 0 0;max-inline-size:none} .hotel-chooser .chooser-item{font-family:var(--font-body);font-size:var(--travel-body-fs);background:color-mix(in oklab,var(--color-surface-muted) 88%,white);border-radius:var(--radius-sm);padding:var(--space-2xs) var(--space-sm)} .hotel-blocks{inline-size:100%;margin:0;display:grid;gap:var(--travel-card-gap);grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))} .hotel-card{display:flex;flex-direction:column;position:relative;min-block-size:100%;isolation:isolate} .hotel-card__media{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-3xs);min-block-size:13rem;margin:calc(-1 * var(--card-pad-y)) calc(-1 * var(--card-pad-x)) var(--space-md);padding:var(--space-lg);border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;overflow:hidden;color:var(--color-surface);background:linear-gradient(180deg,rgba(15,20,26,.08),rgba(15,20,26,.58))} .hotel-card__media::before,.hotel-card__media::after{content:"";position:absolute;inset:auto auto 1.2rem 1.2rem;border-radius:999px;pointer-events:none} .hotel-card__media::before{inline-size:7rem;block-size:7rem;background:radial-gradient(circle,color-mix(in oklab,white 20%,transparent),transparent 68%);opacity:.55} .hotel-card__media::after{inset:1rem 1rem auto auto;inline-size:5.25rem;block-size:5.25rem;background:radial-gradient(circle,color-mix(in oklab,white 18%,transparent),transparent 72%);opacity:.4} .hotel-card__media--comfort{background-image:linear-gradient(180deg,rgba(20,26,36,.12),rgba(20,26,36,.62)),url("../images/travel/comfort-inn-clarkston.jpg"),linear-gradient(135deg,#8ea5b7 0%,#6d7e94 42%,#c4a98a 100%);background-position:center,center,center;background-size:cover,cover,cover} .hotel-card__media--towneplace{background-image:linear-gradient(180deg,rgba(21,25,18,.1),rgba(21,25,18,.58)),url("../images/travel/towneplace-suites-auburn-hills.jpg"),linear-gradient(135deg,#70836a 0%,#9cb18f 40%,#d9c4a4 100%);background-position:center,center,center;background-size:cover,cover,cover} .hotel-card__media-kicker,.hotel-card__media-title{position:relative;z-index:1} .hotel-card__media-kicker{font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;opacity:.88} .hotel-card__media-title{font-family:var(--font-display);font-size:clamp(1.65rem,1.1rem + 1.2vw,2.15rem);line-height:1.05;max-inline-size:12ch} .hotel-card__header{margin-bottom:var(--space-xs)} .hotel-card__name{margin:0 0 var(--space-3xs)} .hotel-card__perks{margin:0 0 var(--space-sm);padding-inline-start:1.25rem} .hotel-card__perks li{margin:0 0 .35rem} .hotel-card__cta{margin-top:auto} .cutoff{margin-top:var(--space-2xs);font-style:italic;color:var(--color-text-subtle)} .travel-block-note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm)} .travel-block-note{padding:var(--space-sm);border-radius:var(--card-radius);background:color-mix(in oklab,var(--color-surface) 92%,var(--color-surface-muted));border:var(--card-border);box-shadow:var(--shadow-sm)} .travel-block-note h4{margin:0 0 .3rem;font-family:var(--font-body);font-size:var(--step-2)} .travel-block-note p{margin:0;color:var(--color-text)} .travel-map-shell{display:grid;gap:var(--space-lg);inline-size:min(100%,var(--travel-inline));margin:0 auto var(--space-xl);padding:var(--card-pad-y) var(--card-pad-x);background:var(--travel-surface)} .travel-map-head{display:grid;gap:var(--space-md);align-items:end} .travel-map-intro{max-inline-size:44rem} .travel-map-control-group{display:grid;gap:var(--space-2xs)} .travel-map-control-label{margin:0;font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-medium);color:var(--color-text)} .travel-map-shortcuts{display:flex;flex-wrap:wrap;gap:var(--space-xs)} .travel-map-shortcut{cursor:pointer} .travel-map-shortcut{min-block-size:2.85rem;padding-inline:1rem;border-width:1px;font-weight:var(--weight-bold)} .travel-map-layout{display:grid;grid-template-columns:1fr;gap:var(--travel-card-gap);align-items:start} .travel-map-stage,.travel-map-sidebar{display:grid;gap:var(--space-sm);align-content:start} .travel-map-container iframe{block-size:clamp(38rem,56vw,52rem)} .travel-map-sidebar{grid-template-columns:1fr} .travel-map-spotlight{display:grid;gap:var(--space-sm);background:color-mix(in oklab,var(--color-surface) 92%,var(--color-surface-muted))} .travel-map-detail-row{display:grid;gap:var(--space-3xs);padding-top:var(--space-xs);border-top:1px dashed color-mix(in oklab,var(--border-muted),transparent 10%)} .travel-map-detail-label{font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)} .travel-map-detail-row p{margin:0;color:var(--color-text)} .travel-map-detail-row a{text-decoration:none;color:var(--color-action-hover)} .travel-map-detail-row a:hover,.travel-map-detail-row a:focus-visible{text-decoration:underline} .travel-map-tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2xs)} .travel-map-tag{display:inline-flex;align-items:center;min-block-size:2rem;padding:.3rem .75rem;border-radius:999px;background:color-mix(in oklab,var(--color-surface) 84%,var(--color-surface-muted));border:1px solid color-mix(in oklab,var(--border-muted),transparent 10%);font-size:var(--step-1);color:var(--color-text)} .travel-map-actions{justify-content:flex-start} .travel-route-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr);gap:var(--travel-card-gap);align-items:start;inline-size:min(100%,var(--travel-inline));margin:0 auto} .map-container{inline-size:var(--map-inline);margin:0;align-self:start;border-radius:var(--map-radius);overflow:hidden;background:var(--color-surface);border:var(--map-border-w) solid var(--map-border-color);box-shadow:var(--shadow-md);transition:var(--transition-elevate)} .map-container iframe{inline-size:100%;block-size:var(--map-h);border:0;display:block} .map-container:focus-within{box-shadow:var(--shadow-md),var(--focus-ring)} .travel-route-panel{display:grid;align-content:start;gap:var(--space-sm);padding:var(--card-pad-y) var(--card-pad-x);background:var(--travel-surface)} .travel-route-panel--wide{inline-size:min(100%,var(--travel-inline));margin:0 auto} .travel-route-head{max-inline-size:44rem} .travel-route-panel h3{margin:0;font-family:var(--font-display);font-size:var(--step-4)} .travel-route-list{display:grid;gap:var(--space-sm)} .travel-route-list--grid{grid-template-columns:repeat(3,minmax(0,1fr))} .travel-route-card{padding:var(--space-sm);border-radius:var(--card-radius);background:color-mix(in oklab,var(--color-surface) 90%,var(--color-surface-muted));border:var(--card-border);box-shadow:var(--card-shadow)} .travel-route-panel .travel-route-card{--frame-current-outer-color:transparent;--frame-current-inner-color:var(--frame-subtle-inner-color);--frame-current-outer-w:1px;--frame-current-inner-w:var(--frame-subtle-inner-w);--frame-current-gap:var(--frame-subtle-gap);border:1px solid transparent !important;background:var(--card-bg-muted);box-shadow:var(--card-shadow),var(--card-sheen)} .travel-route-card h4{margin:0 0 .2rem;font-family:var(--font-body);font-size:var(--step-2)} .travel-route-card p{margin:0;color:var(--color-text)} .travel-info-section{inline-size:min(100%,var(--travel-inline));margin:var(--travel-section-mt) auto 0;padding-inline:var(--travel-section-pad-x)} .travel-curated-section + .travel-curated-section{margin-top:var(--space-xl)} .travel-section-head{max-inline-size:42rem;margin:0 0 var(--space-md)} .travel-section-intro{margin:0;color:var(--color-text-muted);font-size:var(--step-1)} .travel-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--travel-card-min),100%),1fr));gap:var(--travel-card-gap);margin-bottom:0} .travel-info-grid .travel-card-link{display:block;text-decoration:none;color:inherit;outline:0;transition:var(--transition-elevate)} .travel-info-grid .travel-card-link:focus-visible .travel-card{box-shadow:var(--shadow-md),var(--focus-ring)} .travel-card{display:flex;flex-direction:column;gap:var(--space-2xs);background:color-mix(in oklab,var(--color-surface) 92%,var(--color-surface-muted));border:var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--card-shadow);transition:var(--transition-elevate),var(--transition-color);min-block-size:100%} :is(.travel-card-link:hover .travel-card,.travel-card:hover){transform:translateY(-1px);background:var(--color-surface-muted)} .travel-card h3{font-family:var(--font-body);font-size:var(--travel-name-fs);margin:0;color:var(--color-text)} .travel-card p{font-family:var(--font-body);font-size:var(--travel-body-fs);margin:0;color:var(--color-text)} .travel-distance{font-style:italic;color:var(--color-text-subtle);font-size:var(--travel-distance-fs);white-space:normal} .travel-link-label{margin-top:auto;padding-top:var(--space-sm);font-size:var(--step-1);font-weight:var(--weight-bold);color:var(--color-action-hover)} .travel-card.featured{position:relative} .card-ribbon{position:absolute;top:var(--ribbon-offset-y);left:var(--ribbon-offset-x);z-index:3;background:var(--color-action);color:var(--color-surface);padding:2px var(--space-2xs);font-size:var(--ribbon-fs);border-radius:var(--radius-md);font-family:var(--font-body);box-shadow:var(--shadow-sm)} .travel-bottom-note{margin-top:var(--space-xl)} :is(.travel-card-link:hover .travel-card.is-framed,.travel-card.is-framed:hover){transform:translateY(-1px)} [data-page="travel"] .travel-card.featured.is-framed{position:relative} @media (min-width:42rem){.hotel-chooser{grid-template-columns:1fr 1fr}} @media (max-width:56.25em){[data-page="travel"]{--travel-section-pad-x:var(--space-md);--travel-card-gap:var(--space-md);--travel-card-min:15rem;--travel-callout-max:100%;--travel-callout-pad-y:var(--space-sm);--travel-callout-pad-x:var(--space-md);--map-h:23rem}.travel-route-layout,.travel-block-note-grid,.travel-map-sidebar,.travel-route-list--grid{grid-template-columns:1fr}.travel-section-head,.travel-block-head,.travel-map-intro,.travel-route-head{max-inline-size:100%}.travel-map-container iframe{block-size:36rem}} @media (max-width:37.5em){[data-page="travel"]{--map-border-w:2px;--map-h:20rem;--travel-section-pad-x:0;--travel-card-gap:var(--space-sm);--travel-name-fs:clamp(1.15rem,4.8vw,1.35rem);--travel-body-fs:clamp(.98rem,3.8vw,1.05rem);--travel-distance-fs:.95rem;--travel-callout-title-fs:clamp(1.35rem,5.2vw,1.55rem);--ribbon-fs:.7rem}.travel-page::before,.travel-page::after{inline-size:16rem;block-size:16rem}.travel-actions,.travel-jump-links,.travel-map-shortcuts{justify-content:flex-start}.travel-hero{justify-items:start;text-align:left}.travel-chip{inline-size:auto}.travel-copy-feedback{text-align:left}.travel-block-shell,.travel-map-shell,.travel-route-panel--wide{padding:var(--space-md)}.hotel-card__media{min-block-size:11rem;padding:var(--space-md);margin:calc(-1 * var(--card-pad-y)) calc(-1 * var(--card-pad-x)) var(--space-sm)}.travel-map-container iframe{block-size:28rem}} /* ================================================ ๐ŸŽ Registry โ€” single-CTA refinement (DROP-IN) ================================================ */ [data-page="registry"]{container-type:inline-size;container-name:registry;--registry-inline:var(--inline-lg);--registry-gap:var(--space-lg);--registry-links-mt:var(--space-xl);--registry-max-note:var(--container-sm);--registry-note-fs:var(--step-1);--registry-card-maxw:40rem;--registry-card-pad-y:clamp(1rem,3.5cqi,1.5rem);--registry-card-pad-x:clamp(1rem,4cqi,2rem);--registry-card-hover-bg:var(--color-surface-muted)} .registry-links{display:flex;justify-content:center;align-items:center;gap:var(--registry-gap);margin-top:var(--registry-links-mt);inline-size:min(100%,var(--registry-inline));margin-inline:auto} .registry-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;outline:0;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--registry-card-pad-y) var(--registry-card-pad-x);box-shadow:var(--card-shadow);transition:var(--transition-elevate),var(--transition-color),transform .15s ease;max-inline-size:var(--registry-card-maxw);inline-size:100%} .registry-card.is-primary{border-width:2px} .registry-card:hover{transform:translateY(-1px);background:var(--registry-card-hover-bg)} .registry-card:focus-visible{box-shadow:var(--focus-ring),var(--card-shadow)} .registry-card__title{font:var(--weight-bold) var(--step-2)/1.2 var(--font-body);color:var(--color-text);text-align:center;letter-spacing:.01em} .registry-card__meta{font:var(--weight-medium) clamp(.85rem,1.6vw,.95rem)/1.25 var(--font-body);color:var(--color-text-muted, color-mix(in oklab, var(--color-text) 70%, transparent));opacity:.9;text-align:center} .registry-note,.registry-subnote{text-align:center;max-inline-size:var(--registry-max-note);margin:var(--space-lg) auto var(--space-sm);font-family:var(--font-body);font-size:var(--registry-note-fs);color:var(--color-text)} .registry-subnote{opacity:.95} .registry-card.is-primary::after{content:"";inline-size:1.1em;block-size:1.1em;margin-top:.25rem;mask:var(--icon-arrow, path("M2 12h16M12 6l6 6-6 6")) no-repeat center/contain;background:currentColor;opacity:.8} @supports not (mask:none){.registry-card.is-primary::after{display:none}} @media (prefers-reduced-motion:reduce){.registry-card{transition:var(--transition-color)}.registry-card:hover{transform:none}} @media (max-width:56.25em){[data-page="registry"]{--registry-inline:100%;--registry-links-mt:var(--space-lg);--registry-note-fs:var(--step-0);--registry-max-note:min(92%,38rem)}} @media (max-width:37.5em){[data-page="registry"]{--registry-card-maxw:100%;--registry-card-pad-y:1.1rem;--registry-card-pad-x:1.25rem}.registry-card__title{font-size:clamp(1.05rem,4.2vw,1.2rem)}} /* ================================================ โ“ FAQ (accordion) ================================================ */ /* ================================================ Registry page polish ================================================ */ [data-page="registry"]{--registry-inline:var(--inline-lg);--registry-surface:color-mix(in oklab,var(--color-surface) 88%,var(--color-surface-muted));--registry-surface-muted:color-mix(in oklab,var(--color-surface-muted) 76%,white);--registry-card-gap:var(--space-lg);--registry-card-pad-y:var(--space-md);--registry-card-pad-x:var(--space-lg);--registry-chip-active-bg:var(--color-action);--registry-chip-active-color:var(--on-action)} .registry-page{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 84%,var(--color-bg)) 0%,color-mix(in oklab,var(--color-surface-muted) 40%,transparent) 100%);isolation:isolate} .registry-page::before,.registry-page::after{content:"";position:absolute;inline-size:22rem;block-size:22rem;border-radius:50%;pointer-events:none;z-index:-1;opacity:.52} .registry-page::before{top:-4rem;left:-5rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 24%,transparent),transparent 69%)} .registry-page::after{right:-4rem;bottom:-6rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-action) 26%,transparent),transparent 70%)} .registry-hero{margin:0 auto} .registry-hero .page-hero-copy{justify-items:center;text-align:center} .registry-eyebrow,.registry-highlight__eyebrow,.registry-card__eyebrow,.registry-note-panel__eyebrow,.registry-callout__eyebrow{margin:0;font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .registry-intro{margin:0;max-inline-size:var(--page-lede-max);color:var(--color-text-muted)} .registry-jump-links,.registry-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .registry-chip{text-decoration:none!important;background:color-mix(in oklab,var(--color-surface) 88%,transparent);transition:var(--transition-color),var(--transition-elevate)} .registry-chip:hover,.registry-chip:focus-visible{background:var(--registry-chip-active-bg);color:var(--registry-chip-active-color);border-color:transparent} .registry-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--registry-card-gap);inline-size:min(100%,var(--registry-inline));margin:var(--space-xl) auto 0} .registry-highlight,.registry-card,.registry-note-panel,.registry-callout{background:var(--registry-surface);border-radius:var(--card-radius);box-shadow:var(--card-shadow)} .registry-highlight{display:grid;gap:var(--space-2xs);padding:var(--registry-card-pad-y) var(--registry-card-pad-x)} .registry-highlight h3,.registry-card__heading,.registry-note-panel h3,.registry-callout h3{margin:0;font-family:var(--font-display);line-height:var(--lh-tight);color:var(--color-text)} .registry-highlight h3{font-size:var(--step-3)} .registry-highlight p{margin:0;color:var(--color-text)} .registry-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);gap:var(--registry-card-gap);inline-size:min(100%,var(--registry-inline));margin:var(--space-xl) auto 0;align-items:stretch} .registry-card,.registry-note-panel{position:relative;display:grid;align-content:start;align-items:start;justify-items:start;gap:var(--space-sm);padding:var(--registry-card-pad-y) var(--registry-card-pad-x);inline-size:100%;max-inline-size:none} .registry-card--featured{background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 92%,white),color-mix(in oklab,var(--color-surface-muted) 70%,white))} .registry-card__heading{font-size:var(--type-card-title-fs);text-align:left} .registry-card__body,.registry-note-panel p,.registry-callout p{margin:0;color:var(--color-text)} .registry-card__list,.registry-guidance{margin:0;padding-left:1.1rem;display:grid;gap:var(--space-2xs);color:var(--color-text)} .registry-card__actions{display:grid;justify-items:start;gap:var(--space-xs);margin-top:var(--space-xs)} .registry-card__meta{margin:0;font:var(--weight-medium) clamp(.85rem,1.6vw,.95rem)/1.25 var(--font-body);color:var(--color-text-muted);text-align:left} .registry-note-panel{background:color-mix(in oklab,var(--registry-surface-muted) 86%,white)} .registry-note-panel h3{font-size:var(--step-4)} .registry-callout{inline-size:min(100%,48rem);margin:var(--space-md) auto 0;display:grid;justify-items:center;gap:var(--space-2xs);padding:clamp(.75rem,.7rem + .25vw,1rem) var(--registry-card-pad-x);text-align:center;background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 92%,white),color-mix(in oklab,var(--color-surface-muted) 82%,white))} .registry-actions--center{justify-content:center} @media (prefers-reduced-motion:reduce){.registry-chip{transition:var(--transition-color)}} @media (max-width:56.25em){[data-page="registry"]{--registry-card-gap:var(--space-md);--registry-card-pad-x:var(--space-md)}.registry-layout{grid-template-columns:1fr}.registry-hero{max-inline-size:100%}.registry-hero .page-hero-copy{justify-items:start;text-align:left}.registry-actions{justify-content:flex-start}.registry-callout{justify-items:start;text-align:left;margin-left:0;margin-right:0}} @media (max-width:37.5em){[data-page="registry"]{--registry-card-gap:var(--space-sm);--registry-card-pad-y:var(--space-sm);--registry-card-pad-x:var(--space-sm)}.registry-page::before,.registry-page::after{inline-size:16rem;block-size:16rem}.registry-card__heading{font-size:clamp(1.35rem,5.8vw,1.7rem)}.registry-highlight h3,.registry-note-panel h3,.registry-callout h3{font-size:clamp(1.3rem,5.2vw,1.55rem)}.registry-card__actions{justify-items:stretch}.registry-card__actions .button{inline-size:100%}} [data-page="faq"]{ container-type:inline-size; container-name:faq; --faq-inline:var(--inline-lg); --faq-gap:var(--space-sm); --faq-surface:color-mix(in oklab,var(--color-surface) 88%,var(--color-surface-muted)); --faq-surface-muted:color-mix(in oklab,var(--color-surface-muted) 76%,white); --faq-chip-active-bg:var(--color-action); --faq-chip-active-color:var(--on-action); --faq-q-fs:var(--step-2); --faq-q-weight:var(--weight-bold); --faq-q-pad-y:var(--space-sm); --faq-q-pad-x:var(--space-md); --faq-icon-fs:1rem; --faq-icon-ml:var(--space-sm); --faq-a-open-max:60rem; --faq-a-open-pad:0 var(--space-md) var(--space-md); --faq-a-offset-y:-.35rem; --faq-a-fs:var(--step-1); --faq-a-lh:var(--lh-normal); --faq-a-measure:64ch } .faq-page{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 84%,var(--color-bg)) 0%,color-mix(in oklab,var(--color-surface-muted) 42%,transparent) 100%);isolation:isolate} .faq-page::before,.faq-page::after{content:"";position:absolute;inline-size:22rem;block-size:22rem;border-radius:50%;pointer-events:none;z-index:-1;opacity:.5} .faq-page::before{top:-5rem;right:-4rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-action) 22%,transparent),transparent 70%)} .faq-page::after{bottom:-6rem;left:-5rem;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 24%,transparent),transparent 68%)} .faq-hero{max-inline-size:48rem;margin:0 auto var(--space-xl);display:grid;justify-items:center;gap:var(--space-xs);text-align:center} .faq-eyebrow,.faq-callout__eyebrow,.faq-group-kicker{font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .faq-eyebrow,.faq-callout__eyebrow,.faq-group-kicker{margin:0} .faq-intro{max-inline-size:42rem;margin:0 auto} .faq-jump-links,.faq-controls,.faq-callout__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .faq-chip{text-decoration:none!important;background:color-mix(in oklab,var(--color-surface) 85%,transparent);transition:var(--transition-color),var(--transition-elevate)} .faq-chip:hover,.faq-chip:focus-visible{background:var(--faq-chip-active-bg);color:var(--faq-chip-active-color);border-color:transparent} .faq-controls{margin:0 0 var(--space-xl)} .faq-group{inline-size:min(100%,var(--faq-inline));margin:0 auto var(--space-2xl);padding:var(--space-lg) var(--space-lg) var(--space-xl);background:color-mix(in oklab,var(--color-surface) 92%,var(--color-surface-muted));scroll-margin-top:var(--anchor-scroll-offset)} .faq-group:last-of-type{margin-bottom:var(--space-xl)} .faq-group-head{max-inline-size:44rem;margin:0 auto var(--space-lg);text-align:center} .faq-group-intro{margin:0;color:var(--color-text-muted);font-size:var(--step-1);line-height:var(--lh-comfy)} .faq-list{display:flex;flex-direction:column;gap:var(--faq-gap);inline-size:100%;margin-inline:auto} .faq-category{font-family:var(--font-display);font-size:var(--step-5);color:var(--color-text);margin:var(--space-2xs) 0 var(--space-xs);text-align:center;line-height:var(--lh-tight)} .faq-item{background:var(--faq-surface);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:var(--transition-elevate),var(--transition-color);overflow:hidden} .faq-item:hover{transform:translateY(-1px);background:var(--faq-surface-muted)} .faq-item:focus-within{box-shadow:var(--card-shadow),var(--focus-ring)} .accordion-question{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm);inline-size:100%;font-family:var(--font-body);font-size:var(--faq-q-fs);font-weight:var(--faq-q-weight);background:transparent;color:var(--color-text);border:0;text-align:left;cursor:pointer;outline:0;margin:0;padding:var(--faq-q-pad-y) var(--faq-q-pad-x);transition:var(--transition-color)} .accordion-question:hover{background:color-mix(in oklab,var(--color-accent) 12%,transparent)} .accordion-question.open{background:color-mix(in oklab,var(--color-accent) 10%,transparent)} .accordion-question:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-accent),transparent 65%)} .accordion-icon{flex:0 0 auto;font-size:var(--faq-icon-fs);line-height:1.2;margin-left:var(--faq-icon-ml);transition:transform var(--dur-mid) var(--ease-standard),color var(--dur-mid) var(--ease-standard);color:var(--color-text-muted)} .accordion-question.open .accordion-icon{transform:rotate(180deg);color:var(--color-accent)} .accordion-answer{max-block-size:0;overflow:hidden;opacity:0;transform:translateY(var(--faq-a-offset-y));padding:0;background:transparent;transition:max-block-size var(--dur-mid) var(--ease-standard),opacity var(--dur-mid) var(--ease-standard),transform var(--dur-mid) var(--ease-standard),padding var(--dur-mid) var(--ease-standard)} .accordion-answer.open{max-block-size:var(--faq-a-open-max);opacity:1;transform:none;padding:var(--faq-a-open-pad)} .accordion-answer p{margin:0;max-inline-size:var(--faq-a-measure);font-size:var(--faq-a-fs);line-height:var(--faq-a-lh);color:var(--color-text)} .faq-callout{inline-size:min(100%,48rem);margin:0 auto;background:var(--faq-surface);padding:var(--card-pad-y) var(--card-pad-x);text-align:center} .faq-callout h3{margin:.2rem 0 var(--space-xs);font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight)} .faq-callout p{margin:0 auto var(--space-md);max-inline-size:44ch;color:var(--color-text);font-size:var(--step-1);line-height:var(--lh-comfy)} @media (prefers-reduced-motion:reduce){ .faq-item,.faq-chip,.accordion-question{transition:var(--transition-color)} .faq-item:hover,.faq-chip:hover{transform:none} .accordion-answer{transition:max-height var(--dur-mid) var(--ease-standard),opacity var(--dur-mid) var(--ease-standard),padding var(--dur-mid) var(--ease-standard)} .accordion-question.open .accordion-icon{transform:none} } @media (max-width:56.25em){ [data-page="faq"]{ --faq-q-fs:clamp(1.05rem,4.2vw,1.18rem); --faq-q-pad-y:var(--space-sm); --faq-q-pad-x:var(--space-sm); --faq-a-open-pad:0 var(--space-sm) var(--space-sm) } .faq-group{padding:var(--space-md) var(--space-md) var(--space-lg)} .faq-category{font-size:clamp(1.6rem,5.4vw,2rem)} } @media (max-width:37.5em){ [data-page="faq"]{ --faq-gap:var(--space-xs); --faq-q-pad-y:var(--space-sm); --faq-q-pad-x:var(--space-sm); --faq-a-open-pad:0 var(--space-sm) var(--space-sm) } .faq-page::before,.faq-page::after{inline-size:16rem;block-size:16rem} .faq-hero{justify-items:start;text-align:left} .faq-jump-links,.faq-controls,.faq-callout__actions{justify-content:flex-start} .faq-group{padding:var(--space-md)} .faq-callout{text-align:left} } /* ================================================ ๐Ÿ–ผ๏ธ Gallery page โ€” uniform, responsive grids (DROP-IN) =================================================== */ [data-page="gallery"]{container-type:inline-size;container-name:gallery;--media-max:var(--container-lg);--media-inline:min(92%,var(--media-max));--media-min:14rem;--media-gap:var(--space-xs);--media-gap-balanced:var(--space-sm);--media-radius:var(--card-radius);--media-bg:var(--card-bg-muted);--media-shadow:var(--card-shadow);--hover-move:translateY(-2px) scale(1.01)} .section.subtitle{text-align:center;margin:var(--space-md) 0 var(--space-xs)} .gallery-hero{position:relative;padding-block:clamp(1.5rem,1rem + 2vw,3rem)} .gallery-hero .hero-wrap{position:relative;inline-size:var(--media-inline);margin:0 auto;block-size:clamp(42svh,54svh,72svh);border-radius:var(--media-radius);overflow:hidden;box-shadow:var(--media-shadow)} .gallery-hero .hero{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;transition:opacity .6s ease} .gallery-hero .hero-a{opacity:1} .hero-crossfade{--x:0} .hero-crossfade .hero-a{opacity:calc(1 - var(--x))} .hero-crossfade .hero-b{opacity:var(--x)} .gallery-hero .hero-title{position:absolute;inset:auto 0 0;text-align:center;padding:.75rem 0 1rem;background:linear-gradient(to top,color-mix(in oklab,var(--surface,#fff) 85%,transparent),transparent)} .gallery-grid,.proposal-seq,.now-strip{inline-size:var(--media-inline);max-inline-size:var(--media-max);margin-inline:auto;display:grid;gap:var(--media-gap-balanced);grid-template-columns:repeat(auto-fit,minmax(var(--media-min),1fr));justify-content:center;align-items:stretch} .gallery-grid a,.proposal-seq a,.now-strip a{position:relative;display:block;border-radius:var(--media-radius);overflow:hidden;box-shadow:var(--media-shadow);background:var(--color-surface)} .gallery-grid img,.proposal-seq img,.now-strip img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:center;margin:0;-webkit-mask-image:-webkit-radial-gradient(white,black)} .proposal-seq .seq{aspect-ratio:4/3} .now-strip .now-card{aspect-ratio:1/1} [data-lightbox][data-captions="hover"] a{position:relative;display:block} [data-lightbox] .media-caption{font-family:var(--font-body);font-size:var(--step-1,1rem);line-height:1.25;color:var(--ink,#111);pointer-events:none;position:absolute;left:50%;bottom:2%;transform:translateX(-50%) translateY(8px);opacity:0;transition:opacity .25s ease,transform .25s ease;padding:.5rem .75rem;text-align:center;border-bottom-left-radius:var(--media-radius);border-bottom-right-radius:var(--media-radius);max-inline-size:calc(100% - 1rem);background:color-mix(in oklab,var(--color-surface-muted,#fff) 55%,transparent)} @supports (backdrop-filter:blur(3px)){[data-lightbox] .media-caption{backdrop-filter:saturate(120%) blur(3px)}} [data-lightbox][data-captions="hover"] a:hover .media-caption,[data-lightbox][data-captions="hover"] a:focus-visible .media-caption{opacity:1;transform:translateX(-50%) translateY(0)} [data-lightbox] a.is-caption-always .media-caption{opacity:1;transform:translateX(-50%) translateY(0)} [data-lightbox].is-caption-below .media-caption{position:static;opacity:1;transform:none;padding:.5rem .25rem .25rem;background:none;text-align:center;max-inline-size:none;border-radius:0} @container gallery (max-width:48rem){[data-page="gallery"]{--media-min:12.5rem}} @container gallery (max-width:36rem){[data-page="gallery"]{--media-min:11rem}} .collage-grid{inline-size:var(--media-inline);margin:var(--space-md) auto;display:grid;gap:var(--media-gap-balanced);grid-template-columns:repeat(auto-fit,minmax(var(--media-min),1fr));justify-content:center;align-items:stretch;grid-auto-flow:dense} .collage-grid .tile{display:block;border-radius:var(--media-radius);overflow:hidden;box-shadow:var(--media-shadow);aspect-ratio:3/4} .collage-grid .tile img{display:block;inline-size:100%;block-size:100%;object-fit:cover} @container gallery (min-width:62rem){.collage-grid{grid-template-columns:1.1fr .9fr 1.2fr;grid-template-areas:"t1 t2 t5" "t3 t4 t5"}.tile.t1{grid-area:t1}.tile.t2{grid-area:t2}.tile.t3{grid-area:t3}.tile.t4{grid-area:t4}.tile.t5{grid-area:t5;aspect-ratio:auto}} /* ================================================ ๐Ÿ“ซ Contact ================================================ */ /* ================================================ Gallery page polish ================================================ */ [data-page="gallery"]{--media-inline:min(100%,var(--container-lg));--media-min:14rem;--media-gap-balanced:clamp(.8rem,.6rem + .4vw,1.1rem);--media-radius:clamp(.9rem,.75rem + .4vw,1.2rem);--media-shadow:0 16px 40px rgba(62,52,35,.08);--gallery-chip-active-bg:var(--color-action);--gallery-chip-active-color:var(--on-action);--gallery-frame-inset:clamp(.75rem,1.8vw,1.5rem);--hover-move:translateY(-4px) scale(1.01)} .gallery-page{position:relative;display:grid;gap:clamp(1.5rem,1rem + 1.6vw,2.6rem);padding-block:clamp(1.25rem,1rem + 1vw,2.25rem);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,242,235,.94));overflow-x:clip;overflow-y:hidden} .gallery-page > *{min-inline-size:0} .gallery-page::before,.gallery-page::after{content:"";position:absolute;border-radius:999px;pointer-events:none;filter:blur(14px);opacity:.55;z-index:-1} .gallery-page::before{inline-size:18rem;block-size:18rem;top:3rem;left:-4rem;background:radial-gradient(circle,rgba(214,168,158,.28),transparent 70%)} .gallery-page::after{inline-size:20rem;block-size:20rem;right:-5rem;bottom:8rem;background:radial-gradient(circle,rgba(182,196,154,.24),transparent 72%)} .gallery-subtitle{margin:0;font-family:var(--font-display);font-size:var(--type-section-title-fs);line-height:1.1;color:var(--color-text)} .gallery-hero{position:relative} .gallery-hero .hero-wrap{position:relative;inline-size:min(100%,var(--container-lg));margin:0 auto;min-block-size:clamp(30rem,60vh,42rem);border-radius:calc(var(--media-radius) + .3rem);overflow:hidden;box-shadow:0 30px 70px rgba(62,52,35,.14);isolation:isolate;background:var(--color-surface)} .gallery-hero .hero-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,26,18,.12) 0%,rgba(39,26,18,.24) 42%,rgba(39,26,18,.58) 100%);pointer-events:none} .gallery-hero .hero{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover} .gallery-hero-card{position:absolute;left:clamp(1rem,2vw,2rem);right:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);z-index:1;display:grid;gap:var(--space-xs);max-inline-size:min(40rem,100%);padding:clamp(1rem,.85rem + .9vw,1.6rem);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,250,246,.84),rgba(255,250,246,.92));box-shadow:0 18px 32px rgba(0,0,0,.16)} .gallery-eyebrow,.gallery-kicker{margin:0;font-family:var(--font-body);font-size:var(--step-1);font-weight:var(--weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)} .gallery-title{margin:0;font-family:var(--font-display);font-size:var(--type-hero-title-fs);line-height:1.05;color:var(--color-text)} .gallery-intro,.gallery-summary,.gallery-closing{margin:0;color:var(--color-text-muted)} .gallery-stats{display:flex;flex-wrap:wrap;gap:var(--space-xs)} .gallery-toolbar{display:grid;gap:var(--space-xs);inline-size:min(100%,54rem);margin:0 auto;text-align:center} .gallery-jump-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)} .gallery-chip{text-decoration:none!important;background:color-mix(in oklab,var(--color-surface) 86%,transparent);transition:var(--transition-color),var(--transition-elevate)} .gallery-chip:hover,.gallery-chip:focus-visible,.gallery-chip.is-active{background:var(--gallery-chip-active-bg);color:var(--gallery-chip-active-color);border-color:transparent} .gallery-help{margin:0;font-size:var(--step-1);color:var(--color-text-muted)} .gallery-chapter{display:grid;gap:var(--space-md);scroll-margin-top:var(--anchor-scroll-offset)} .gallery-chapter + .gallery-chapter{padding-top:clamp(1.4rem,1rem + 1vw,2rem);border-top:1px solid color-mix(in oklab,var(--border-muted),transparent 20%)} .gallery-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);align-items:start;inline-size:min(100%,var(--container-lg));margin:0 auto} .gallery-section-head > div{min-inline-size:0} .gallery-subtitle{text-align:left} .gallery-count{margin:0;align-self:start;padding:.45rem .8rem;border:1px solid var(--border-muted);border-radius:var(--radius-pill);background:rgba(255,255,255,.72);box-shadow:var(--shadow-sm);font-size:var(--step-1);font-variant-numeric:var(--font-numeric);white-space:nowrap} .gallery-grid,.proposal-seq,.now-strip{inline-size:min(100%,var(--container-lg));max-inline-size:min(100%,var(--container-lg));margin-inline:auto;min-inline-size:0} .now-strip{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))} .gallery-grid a,.proposal-seq a,.now-strip a{border:1px solid color-mix(in oklab,var(--border-muted),transparent 18%);transition:transform var(--dur-mid) var(--ease-standard),box-shadow var(--dur-mid) var(--ease-standard),border-color var(--dur-mid) var(--ease-standard)} .gallery-grid a:hover,.proposal-seq a:hover,.now-strip a:hover,.gallery-grid a:focus-visible,.proposal-seq a:focus-visible,.now-strip a:focus-visible{transform:var(--hover-move);box-shadow:0 20px 36px rgba(62,52,35,.16);border-color:color-mix(in oklab,var(--color-accent),transparent 40%)} .gallery-grid img,.proposal-seq img,.now-strip img{transition:transform .6s var(--ease-standard),filter .35s var(--ease-standard)} .gallery-grid a:hover img,.proposal-seq a:hover img,.now-strip a:hover img,.gallery-grid a:focus-visible img,.proposal-seq a:focus-visible img,.now-strip a:focus-visible img{transform:scale(1.03)} .now-strip[data-fade-seq] .now-card{opacity:0;transform:translateY(18px)} .now-strip[data-fade-seq] .now-card.is-in{opacity:1;transform:none} [data-page="gallery"] [data-lightbox] .media-caption{color:var(--color-text);bottom:.7rem;padding:.55rem .85rem;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--color-surface-muted,#fff) 76%,transparent);box-shadow:0 10px 20px rgba(0,0,0,.1)} @supports (backdrop-filter:blur(3px)){[data-page="gallery"] [data-lightbox] .media-caption{backdrop-filter:saturate(120%) blur(6px)}} .gallery-closing{inline-size:min(100%,42rem);margin:0 auto;padding-top:var(--space-xs);text-align:center;font-size:var(--step-2)} @container gallery (max-width:48rem){[data-page="gallery"]{--media-min:12rem}.gallery-section-head{grid-template-columns:1fr}.gallery-count{justify-self:start}.gallery-hero .hero-wrap{min-block-size:clamp(28rem,68svh,36rem)}} @container gallery (max-width:36rem){[data-page="gallery"]{--media-min:10.5rem}.gallery-page{padding-inline:0}.gallery-hero-card{right:1rem;left:1rem}.gallery-stats,.gallery-jump-links{justify-content:flex-start}.gallery-toolbar{text-align:left}.gallery-subtitle{font-size:var(--type-section-title-fs)}[data-page="gallery"] [data-lightbox][data-captions="hover"] .media-caption{position:static;opacity:1;transform:none;margin-top:0;padding:.7rem .4rem 0;background:none;box-shadow:none;border-radius:0;max-inline-size:none;text-align:center}} [data-page="contact"]{ container-type:inline-size; container-name:contact; --page-hero-max:50rem; --page-highlights-max:var(--container-lg); /* Form shell */ --contact-inline: min(92%, var(--container-sm)); --contact-form-mt: var(--space-sm); --contact-row-gap: var(--space-xs); /* Labels/type */ --contact-label-fs: var(--step-2); --contact-label-color: var(--color-text); --contact-label-mt: var(--space-2xs); --contact-label-mb: var(--space-2xs); --contact-label-strong-weight: var(--weight-bold); --contact-muted-opacity: var(--opacity-semi); /* Success container + toast */ --contact-success-container-min-h: 3rem; --contact-success-container-margin: var(--space-2xs) auto var(--space-2xs); --contact-success-max-w: 40rem; --contact-success-fs: var(--step-3); --contact-success-pad-y: var(--space-xs); --contact-success-pad-x: var(--space-sm); --contact-success-radius: var(--radius-md); --contact-success-bg: var(--bg-success); --contact-success-color: var(--color-success); --contact-success-border: 1px solid var(--color-action); --contact-success-error-bg: var(--bg-error); --contact-success-error-color: var(--color-error); --contact-success-error-border: 1px solid var(--border-error); } /* ===== Form shell ===== */ #contact-form{display:flex;flex-direction:column;inline-size:var(--contact-inline);margin:var(--contact-form-mt) auto 0;gap:var(--contact-row-gap);} #contact-success-container{min-block-size:var(--contact-success-container-min-h);display:flex;justify-content:center;align-items:center;margin:var(--contact-success-container-margin);} #contact-success{visibility:hidden;opacity:var(--opacity-zero);transition:var(--transition-fade);background:var(--contact-success-bg);padding:var(--contact-success-pad-y) var(--contact-success-pad-x);border-radius:var(--contact-success-radius);color:var(--contact-success-color);font-weight:var(--weight-bold);font-size:var(--contact-success-fs);text-align:center;inline-size:min(100%, var(--contact-success-max-w));border:var(--contact-success-border);} #contact-success.show{visibility:visible;opacity:var(--opacity-full);} #contact-success.error{background:var(--contact-success-error-bg);color:var(--contact-success-error-color);border:var(--contact-success-error-border);} /* ===== Labels ===== */ #contact-form label{display:flex;flex-direction:column;font-family:var(--field-ff);font-size:var(--contact-label-fs);color:var(--contact-label-color);margin-top:var(--contact-label-mt);} #contact-form .form-label{margin-bottom:var(--contact-label-mb);font-weight:var(--contact-label-strong-weight);} #contact-form .muted{font-weight:normal;opacity:var(--contact-muted-opacity);} .contact-page{position:relative;display:grid;gap:clamp(1.4rem,1rem + 1.3vw,2.2rem);background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 82%,var(--color-bg)) 0%,color-mix(in oklab,var(--color-surface-muted) 42%,transparent) 100%)} .contact-method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--space-md);inline-size:min(100%,var(--container-lg));margin:0 auto} .contact-card{display:grid;gap:var(--space-xs);padding:var(--card-pad-y) var(--card-pad-x);border:var(--card-border);border-radius:var(--card-radius);background:linear-gradient(180deg,color-mix(in oklab,var(--color-surface) 94%,white),color-mix(in oklab,var(--color-surface-muted) 84%,white));box-shadow:var(--card-shadow)} .contact-card h3{margin:0;font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-tight);color:var(--color-text)} .contact-card p{margin:0;color:var(--color-text);font-size:var(--step-1);line-height:var(--lh-comfy)} .contact-links{display:grid;gap:.45rem} .contact-links a{font-weight:var(--weight-bold)} .contact-card--resources .contact-resource-list{list-style:none;display:grid;gap:var(--space-xs);margin:0;padding:0} .contact-card--resources .contact-resource-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:.75rem .9rem;border:1px solid var(--border-muted);border-radius:var(--radius-md);background:rgba(255,255,255,.72);color:var(--color-text);font-weight:var(--weight-bold);text-decoration:none!important;box-shadow:var(--shadow-sm)} .contact-card--resources .contact-resource-list a::after{content:"View";font-size:var(--step-0);font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)} .contact-note{margin:0 auto;max-inline-size:42rem;text-align:center;color:var(--color-text-muted)} /* Shared panel polish */ :is(.page-highlight,.travel-card,.faq-callout,.registry-highlight,.registry-card,.registry-note-panel,.registry-callout,.contact-card,.rsvp-event-card,.welcome-card){--frame-current-outer-color:var(--frame-outer-color);--frame-current-inner-color:var(--frame-inner-color);--frame-current-outer-w:var(--frame-outer-w);--frame-current-inner-w:var(--frame-inner-w);--frame-current-gap:var(--frame-gap);--frame-current-radius:var(--frame-radius-outer);position:relative;border:var(--frame-current-outer-w) solid var(--frame-current-outer-color);border-radius:var(--frame-current-radius);box-shadow:var(--card-shadow),var(--card-sheen);background-clip:padding-box} :is(.page-highlight,.travel-card,.faq-callout,.registry-highlight,.registry-card,.registry-note-panel,.registry-callout,.contact-card,.rsvp-event-card,.welcome-card)::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} :is(.home-dashboard-stat,.home-dashboard-note,.home-live-timeline-item,.travel-route-card,.travel-block-note,.faq-item,.timeline-content,.contact-card--resources .contact-resource-list a,.home-venue-map-detail,.event-info-calendarmenu){--frame-current-outer-color:transparent;--frame-current-inner-color:var(--frame-subtle-inner-color);--frame-current-outer-w:1px;--frame-current-inner-w:var(--frame-subtle-inner-w);--frame-current-gap:var(--frame-subtle-gap);--frame-current-radius:var(--card-radius);position:relative;border:var(--frame-current-outer-w) solid transparent;border-radius:var(--frame-current-radius);box-shadow:var(--card-shadow),var(--card-sheen);background-clip:padding-box} :is(.home-dashboard-stat,.home-dashboard-note,.home-live-timeline-item,.travel-route-card,.travel-block-note,.faq-item,.timeline-content,.contact-card--resources .contact-resource-list a,.home-venue-map-detail,.event-info-calendarmenu)::before{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--frame-current-radius) - var(--frame-current-gap));pointer-events:none} .timeline-content .timeline-details{--frame-current-outer-color:transparent;--frame-current-inner-color:var(--frame-subtle-inner-color);--frame-current-outer-w:1px;--frame-current-inner-w:var(--frame-subtle-inner-w);--frame-current-gap:var(--frame-subtle-gap);border:var(--frame-current-outer-w) solid transparent;border-radius:var(--card-radius);box-shadow:var(--card-shadow),var(--card-sheen);background-clip:padding-box} .timeline-content .timeline-details::after{content:"";position:absolute;inset:var(--frame-current-gap);border:var(--frame-current-inner-w) solid var(--frame-current-inner-color);border-radius:calc(var(--card-radius) - var(--frame-current-gap));pointer-events:none} .home-live-timeline-item[data-state="now"]{--frame-current-outer-color:color-mix(in oklab,var(--color-action),white 18%);--frame-current-inner-color:color-mix(in oklab,var(--color-action),white 52%)} .home-live-timeline-item[data-state="next"]{--frame-current-outer-color:color-mix(in oklab,var(--color-accent),white 22%);--frame-current-inner-color:color-mix(in oklab,var(--color-accent),white 58%)} :is(.page-highlight,.home-card,.home-link-card,.home-spotlight-grid,.home-dashboard-summary,.dashboard-event-card,.home-dashboard-empty,.story-block,.party-card,.party-mode-bar,.timeline-content,.rsvp-event-card,.travel-callout,.travel-card,.travel-map-shell,.travel-route-panel,.travel-route-card,.registry-highlight,.registry-card,.registry-note-panel,.registry-callout,.faq-item,.faq-callout,.contact-card,.gallery-hero-card,.mini-photos figure,.welcome-card){box-shadow:var(--card-shadow),var(--card-sheen);backdrop-filter:saturate(108%)} :is(.page-highlight,.home-card,.home-link-card,.home-spotlight-grid,.home-dashboard-summary,.dashboard-event-card,.home-dashboard-empty,.story-block,.party-card,.party-mode-bar:not(.is-party-mode),.timeline-content,.rsvp-event-card,.travel-callout,.travel-card,.travel-route-panel,.registry-highlight,.registry-card,.registry-note-panel,.registry-callout,.faq-item,.faq-callout,.contact-card,.gallery-hero-card,.mini-photos figure,.welcome-card){background:var(--card-bg)} :is(.home-dashboard-stat,.home-dashboard-note,.travel-callout--notes,.travel-route-card,.travel-block-note,.timeline-content .timeline-details,.contact-card--resources .contact-resource-list a,.home-venue-map-detail,.event-info-calendarmenu){background:var(--card-bg-muted)} :is(.home-link-card:hover,.travel-card:hover,.travel-card-link:hover .travel-card,.registry-card:hover,.faq-item:hover,.timeline-content:hover,.gallery-grid a:hover,.proposal-seq a:hover,.now-strip a:hover,.mini-photos figure:hover,.contact-card--resources .contact-resource-list a:hover){box-shadow:var(--card-shadow-hover),var(--card-sheen)} :is(.home-link-card:focus-visible,.travel-card-link:focus-visible .travel-card,.registry-card:focus-visible,.faq-item:focus-within,.timeline-content:focus-visible,.gallery-grid a:focus-visible,.proposal-seq a:focus-visible,.now-strip a:focus-visible,.contact-card--resources .contact-resource-list a:focus-visible){box-shadow:var(--focus-ring),var(--card-shadow-hover),var(--card-sheen)} :is(.home-link-card:hover,.home-link-card:focus-visible,.travel-card:hover,.travel-card-link:hover .travel-card,.travel-card-link:focus-visible .travel-card,.registry-card:hover,.registry-card:focus-visible,.faq-item:hover,.faq-item:focus-within,.timeline-content:hover,.timeline-content:focus-visible,.contact-card--resources .contact-resource-list a:hover,.contact-card--resources .contact-resource-list a:focus-visible){background:var(--card-bg-muted)} .gallery-hero-card{border:var(--card-border);box-shadow:var(--card-shadow-hover),var(--card-sheen)} .timeline-content .timeline-details,.event-info-calendarmenu{box-shadow:var(--card-shadow),var(--card-sheen)} .timeline-content .timeline-details::before{background:color-mix(in oklab,var(--card-bg-muted),white 12%)} .home-card:hover,.welcome-card:hover{transform:none;box-shadow:var(--card-shadow),var(--card-sheen)} .contact-card--resources .contact-resource-list a:hover{background:var(--btn-ghost-bg-hover);border-color:transparent} .party-toggle .btn{font:inherit;font-weight:var(--weight-bold);font-size:var(--step-0);letter-spacing:.01em;padding:.42rem .8rem;border-radius:var(--radius-pill);border:var(--btn-ghost-border);background:var(--btn-ghost-bg);color:var(--btn-ghost-color);cursor:pointer;box-shadow:var(--btn-shadow)} .party-toggle .btn:hover{background:var(--btn-ghost-bg-hover);box-shadow:var(--btn-shadow-hover)} .party-toggle .btn:focus-visible{outline:0;box-shadow:var(--focus-ring),var(--btn-shadow)} .gallery-count,.rsvp-event-kicker,.rsvp-portal-summary .code-pill,#party-code-ui .code-pill{background:var(--chip-filled-bg);border:var(--chip-outline-border);border-radius:var(--chip-radius);box-shadow:var(--chip-shadow);backdrop-filter:saturate(116%)} .accordion-question{background:linear-gradient(180deg,rgba(255,255,255,.36),transparent);border-top:1px solid color-mix(in oklab,var(--border-muted),white 16%)} .accordion-question:hover{background:color-mix(in oklab,var(--color-accent) 10%,rgba(255,255,255,.72))} .accordion-question.open{background:color-mix(in oklab,var(--color-accent) 8%,rgba(255,255,255,.76))} @container contact (max-width:56.25em){ [data-page="contact"]{ --contact-inline: min(92%, 43.75rem); --contact-success-fs: clamp(1rem, 3.2vw, 1.05rem); --contact-label-fs: clamp(1rem, 3.4vw, 1.06rem); } .contact-method-grid{grid-template-columns:1fr} } } @layer utilities{ /* ================================================ โ™ฟ Accessibility & Interaction Env ================================================ */ @media (prefers-reduced-motion:reduce){ :root{--flip-dur:1ms;} *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .travel-info-grid .travel-card-link, .button-link, .registry-card, .header-toggle::before, .header-toggle::after, .slide-nav, .flip-card-inner{ transition:none !important; } } @media (hover:none){.flip-card:hover .flip-card-inner{transform:none}.accordion-question:hover{background-color:var(--color-surface-muted);color:var(--color-text)}} @media (pointer:coarse){ a,button,input,select{min-block-size:2.75rem} .homepage-button:hover{transform:none} .section a:hover{transform:none} .timeline-content:hover{transform:none;background-color:var(--color-surface)} .travel-info-grid .travel-card-link:hover .travel-card,.travel-card:hover{transform:none} .registry-card:hover{transform:none;background-color:var(--color-surface)} .gallery-item:hover{transform:none} .button:hover{transform:none} } /* Focus helpers */ .accordion-question:focus-visible,.expand-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} #contact-form input:focus-visible,#contact-form textarea:focus-visible,#contact-submit:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} /* ================================================ ๐Ÿงฐ Overlays & Utilities ================================================ */ #nav-scrim{position:fixed;inset:0;background:var(--overlay-weak);pointer-events: none;backdrop-filter:saturate(120%) blur(1px);opacity:var(--opacity-zero);visibility:hidden;transition:var(--transition-fade);z-index:var(--z-scrim)} #nav-scrim.show{opacity:var(--opacity-full);pointer-events: auto;visibility:visible} html.no-scroll,body.no-scroll{height:100vh;overflow:hidden} html:has(#lightbox.open),body:has(#lightbox.open){overflow:hidden} }