/* ══════════════════════════════════════════════════════════════ Julia & Wyatt · Ojai · June 26 2027 Terracotta ranch. Big type, deep air, drifting motifs. ══════════════════════════════════════════════════════════════ */ @layer base, type, motion, components, utils; @layer base { :root{ /* ground — cream, tipped green so the avocado sits in it */ --bone:#F4F2E6; --sand:#E4E6D2; --shell:#FAF9F1; /* avocado — the theme */ --leaf:#6B7F3A; --leaf-d:#47571F; --leaf-l:#97AB63; --olive:#2F3D2A; /* deepest green, near-ink */ --gold:#C8952A; /* the one warm note, used sparingly */ /* ink — green-black, so type belongs to the palette */ --ink:#21281C; --ink-2:#5A6350; --ink-3:#8E9683; --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --gutter:clamp(1.25rem,5vw,4.5rem); --measure:64ch; --shelf:clamp(3.4rem,7.2vw,6.4rem); /* section rhythm */ --r:14px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bone); color:var(--ink); font:400 1.0625rem/1.65 var(--sans); font-feature-settings:'kern' 1,'liga' 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } /* barely-there paper tooth */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .10 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img{max-width:100%;height:auto;display:block} ::selection{background:var(--leaf);color:var(--shell)} :focus-visible{outline:2.5px solid var(--leaf);outline-offset:3px;border-radius:3px} } @layer type { .display{ font-family:var(--serif); font-weight:400; font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1; font-size:clamp(3.6rem,13vw,10.5rem); line-height:.9; letter-spacing:-.028em; margin:0; color:var(--ink); } .display em{font-style:italic;font-weight:300;color:var(--leaf)} h2,.h2{ font-family:var(--serif); font-weight:400; font-variation-settings:'opsz' 72,'SOFT' 30,'WONK' 1; font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:1.02; letter-spacing:-.022em; margin:0 0 .6em; color:var(--ink); } h3,.h3{ font-family:var(--sans); font-weight:600; font-size:1.1rem; line-height:1.35; letter-spacing:-.008em; margin:0 0 .5rem; color:var(--ink); } .eyebrow{ font:500 .72rem/1.5 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--leaf); margin:0 0 1.4rem; } .lede{ font-size:clamp(1.12rem,1.9vw,1.45rem); line-height:1.52; font-weight:350; letter-spacing:-.011em; color:var(--ink-2); margin:1.5rem 0 0; max-width:34ch; } p{margin:0 0 1.05em; max-width:var(--measure)} .small{font-size:.9rem;line-height:1.6;color:var(--ink-2)} a{color:var(--leaf-d);text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; padding-bottom:1px;transition:background-size .3s var(--ease)} a:hover{background-size:0% 1px;background-position:100% 100%} } /* ══════════ drifting motifs ══════════ */ @layer motion { .drifts{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} .drift{position:absolute;left:var(--x);top:var(--y);will-change:transform} .drift svg{ display:block; width:var(--size); height:var(--size); fill:var(--tint,var(--olive)); opacity:var(--op,.07); transform-origin:50% 50%; animation:waft var(--dur,44s) var(--delay,0s) infinite ease-in-out alternate; } @keyframes waft{ 0% {transform:translate3d(0,0,0) rotate(calc(var(--rot) * 1deg))} 25% {transform:translate3d(1.1rem,-1.5rem,0) rotate(calc(var(--rot) * 1deg + 5deg))} 50% {transform:translate3d(-.5rem,-2.6rem,0) rotate(calc(var(--rot) * 1deg - 3deg))} 75% {transform:translate3d(-1.4rem,-1.1rem,0)rotate(calc(var(--rot) * 1deg + 2deg))} 100% {transform:translate3d(.6rem,.4rem,0) rotate(calc(var(--rot) * 1deg - 4deg))} } /* scroll reveal */ .rise{opacity:0;transform:translateY(18px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--rd,0ms)} .rise.seen{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .drift svg{animation:none} .rise{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } } @layer components { /* ── shell ── */ .wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gutter)} .narrow{width:min(760px,100%);margin-inline:auto;padding-inline:var(--gutter)} .col{max-width:760px} /* a narrow column that keeps the page's left edge */ main,header,footer,section{position:relative;z-index:2} section{padding-block:var(--shelf)} /* ── nav ── */ .nav{ position:sticky;top:0;z-index:50; display:flex;align-items:center;gap:2rem; padding:1.1rem var(--gutter); transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s; } .nav.stuck{ background:color-mix(in srgb,var(--bone) 82%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent); } .nav__mark{ font-family:var(--serif);font-weight:400;font-size:1.22rem;letter-spacing:-.01em; font-variation-settings:'opsz' 40,'SOFT' 30,'WONK' 1; color:var(--ink);margin-right:auto;background:none;padding:0; } .nav__mark:hover{color:var(--leaf)} .nav__links{display:flex;gap:1.9rem;align-items:center} .nav__links a{ font:450 .875rem/1 var(--sans);letter-spacing:-.003em;color:var(--ink-2); background:none;padding:0;transition:color .2s var(--ease); } .nav__links a:hover,.nav__links a[aria-current=page]{color:var(--ink)} /* phones: the three links fold into a menu that drops below the bar */ .nav__toggle{display:none} @media(max-width:640px){ .nav__toggle{display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px 0; border:0;padding:0;background:none;color:var(--ink);cursor:pointer} .nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{ display:block;width:20px;height:1.5px;border-radius:1px;background:currentColor; transition:transform .25s var(--ease),background .2s var(--ease)} .nav__toggle span{position:relative} .nav__toggle span::before,.nav__toggle span::after{content:'';position:absolute;left:0} .nav__toggle span::before{top:-6px} .nav__toggle span::after{top:6px} .nav--open .nav__toggle span{background:transparent} .nav--open .nav__toggle span::before{transform:translateY(6px) rotate(45deg)} .nav--open .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg)} .nav--open{background:var(--bone)} .nav__links{display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; padding:0 var(--gutter) .8rem;background:var(--bone); box-shadow:0 18px 30px -18px rgba(33,40,28,.28)} .nav--open .nav__links{display:flex} .nav__links a{font-size:1.05rem;padding:1rem 0; border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)} } /* ── hero ── */ .hero{ min-height:min(88svh,900px); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(3rem,10vh,7rem) var(--shelf); } .hero .display{margin-bottom:.1em} .hero__meta{ display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;align-items:center; margin-top:2.1rem;font-size:clamp(.92rem,1.5vw,1.06rem); letter-spacing:.02em;color:var(--ink-2);font-weight:400; } .hero__meta b{font-weight:550;color:var(--ink)} .dot{width:4px;height:4px;border-radius:50%;background:var(--leaf);flex:none} @media(max-width:620px){ .hero{min-height:min(70svh,760px);padding-block:clamp(1.5rem,5vh,3rem) var(--shelf)} .hero__meta{flex-direction:column;align-items:flex-start;gap:.3rem;margin-top:1.7rem} .hero__meta .dot{display:none} .cue{margin-top:2.4rem} } .cue{ margin-top:clamp(2.5rem,7vh,4.5rem);display:inline-flex;align-items:center;gap:.6rem; font:500 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);background:none;padding:0; } .cue span{display:block;width:1px;height:34px;background:linear-gradient(var(--leaf),transparent)} /* ── bands ── */ .band{background:var(--sand)} .band--green{background:var(--leaf);color:var(--shell)} .band--green h2,.band--green .display{color:var(--shell)} .band--green .eyebrow{color:color-mix(in srgb,var(--shell) 72%,transparent)} .band--green p{color:color-mix(in srgb,var(--shell) 86%,transparent)} /* ── statement ── */ .statement{ font-family:var(--serif);font-weight:300; font-variation-settings:'opsz' 96,'SOFT' 40,'WONK' 1; font-size:clamp(1.85rem,4.6vw,3.5rem);line-height:1.12;letter-spacing:-.021em; max-width:19ch;margin:0; } .statement em{font-style:italic;color:var(--leaf)} .band--green .statement em{color:color-mix(in srgb,var(--shell) 90%,var(--leaf))} /* ── three-up ── */ .trio{display:grid;gap:clamp(2.4rem,5vw,4.2rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(2.5rem,6vw,4.5rem)} .trio__i{width:46px;height:46px;fill:var(--leaf);margin-bottom:1.15rem} .trio p{font-size:.985rem;color:var(--ink-2);margin:0;max-width:38ch} /* ── facts ── */ .facts{display:grid;gap:0;margin:clamp(2.6rem,6vw,4.4rem) 0 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .facts>div{padding:1.5rem 1.2rem 0 0;border-top:1px solid color-mix(in srgb,var(--ink) 13%,transparent)} .facts dt{font:500 .7rem/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--leaf);margin-bottom:.5rem} .facts dd{margin:0;font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.2;letter-spacing:-.012em; font-variation-settings:'opsz' 40,'SOFT' 30,'WONK' 1} .facts dd small{display:block;font:400 .85rem/1.5 var(--sans);color:var(--ink-2);margin-top:.3rem;letter-spacing:0} /* ── invitation plate ── */ .plate{ margin:0;padding:clamp(1.1rem,3vw,2rem);background:var(--shell); border-radius:var(--r); box-shadow:0 1px 2px rgba(33,40,28,.05),0 12px 34px -12px rgba(33,40,28,.16), 0 34px 70px -30px rgba(33,40,28,.18); } .plate img{border-radius:calc(var(--r) - 8px)} .plate figcaption{margin-top:1.1rem;text-align:center;font-size:.82rem;color:var(--ink-3);letter-spacing:.01em} /* ── buttons ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font:500 1rem/1 var(--sans);letter-spacing:-.006em; padding:1.05rem 2.1rem;border:0;border-radius:999px;cursor:pointer; background:var(--leaf);color:var(--shell); box-shadow:0 1px 2px rgba(71,87,31,.2),0 8px 20px -8px rgba(71,87,31,.45); transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease); } .btn:hover{background:var(--leaf-d);transform:translateY(-2px); box-shadow:0 2px 4px rgba(71,87,31,.22),0 14px 30px -10px rgba(71,87,31,.5)} .btn:active{transform:translateY(0)} .btn--ghost{background:transparent;color:var(--ink); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 22%,transparent)} .btn--ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 34%,transparent)} .btn--light{background:var(--shell);color:var(--leaf-d);box-shadow:0 8px 24px -10px rgba(0,0,0,.35)} .btn--light:hover{background:#fff;color:var(--leaf-d)} .btn--sm{padding:.5rem .95rem;font-size:.82rem;white-space:nowrap} .btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem} /* ── footer ── */ .foot{padding:var(--shelf) 0 3.5rem;border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent)} .foot__row{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-end} .foot__marks{display:flex;gap:1rem} .foot__marks svg{width:26px;height:26px;fill:var(--leaf);opacity:.5} /* ── film strip (assets/js/filmstrip.js) ── */ .strip{display:none} .strip--on{ display:block;position:relative;--h:184px;--film:var(--sand);--strip-bg:var(--bone); height:calc(var(--h) * 1.75);overflow:hidden;touch-action:pan-y; -webkit-user-select:none;user-select:none; } .band--green .strip{--strip-bg:var(--leaf)} /* soft edges, painted over the photo row rather than masked: a mask would make the browser recomposite the whole strip every frame */ .strip--on::before,.strip--on::after{content:'';position:absolute;z-index:3;width:6%; top:50%;height:var(--h);margin-top:calc(var(--h) / -2); pointer-events:none;background:linear-gradient(90deg,var(--strip-bg),transparent)} .strip--on::after{right:0;transform:scaleX(-1)} .strip--on::before{left:0} .strip--bleed{width:100vw;margin-inline:calc(50% - 50vw)} .hero > .strip{margin-top:clamp(1rem,4vh,2.5rem)} .band > .strip{margin-top:clamp(1.5rem,4vw,2.75rem);margin-bottom:calc(var(--shelf) * -.45)} .strip.is-dragging{cursor:grabbing} .strip__track{position:absolute;inset:0;will-change:transform} .strip__frame{ position:absolute;left:0;top:50%;height:var(--h);margin-top:calc(var(--h) / -2); padding:0;border:0;overflow:hidden;cursor:zoom-in; background:var(--film) center/cover no-repeat; transform-origin:50% 50%; transition:box-shadow .35s var(--ease); } .strip__frame.is-big{z-index:2; box-shadow:0 22px 44px -14px rgba(20,26,16,.6),0 0 0 1px rgba(255,255,255,.18)} .strip__frame img{width:100%;height:100%;object-fit:cover;pointer-events:none; opacity:0;transition:opacity .6s var(--ease)} .strip__frame.is-loaded img{opacity:1} .strip__frame.is-lifted{visibility:hidden!important} .strip__frame:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px} /* ── lightbox ── */ .lb-open{overflow:hidden} .lb{position:fixed;inset:0;z-index:300;cursor:zoom-out} .lb__glass{position:absolute;inset:0; background:color-mix(in srgb,var(--bone) 38%,transparent); -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)} .lb__fig{position:fixed;margin:0;overflow:hidden;transform-origin:0 0; background:var(--olive);--blur:18px; box-shadow:0 50px 100px -30px rgba(20,26,16,.55),0 18px 36px -18px rgba(20,26,16,.4)} .lb__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lb__lo{transform:scale(1.08);transition:filter .5s var(--ease)} .is-loading .lb__lo{filter:blur(var(--blur)) saturate(1.25)} .lb__hi{opacity:0} /* a fine glass edge over the photo */ .lb__fig::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.35)} .lb__sheen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--ease); background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 47%,rgba(255,255,255,.1) 53%,transparent 64%) 0 0 / 260% 100% no-repeat} .is-loading .lb__sheen{opacity:1;animation:lb-sheen 1.5s cubic-bezier(.45,.05,.35,1) infinite} @keyframes lb-sheen{from{background-position:120% 0}to{background-position:-20% 0}} .lb__bar{position:absolute;left:50%;bottom:18px;width:min(160px,40%);height:5px;translate:-50% 0; border-radius:99px;overflow:hidden;opacity:0;transition:opacity .35s var(--ease); background:rgba(255,255,255,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .is-loading .lb__bar{opacity:1;transition-delay:.25s} .lb__bar i{position:absolute;inset:0;background:rgba(255,255,255,.9);border-radius:inherit; transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease)} .lb__x{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:46px;height:46px; border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--ink); background:color-mix(in srgb,var(--shell) 55%,transparent); -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 24px -10px rgba(20,26,16,.35)} .lb__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .lb__x:hover{background:color-mix(in srgb,var(--shell) 85%,transparent)} @media (prefers-reduced-motion:reduce){ .is-loading .lb__sheen{animation:none} } /* ── gate ── */ .gate{position:fixed;inset:0;z-index:200;background:var(--bone); display:grid;place-items:center;padding:var(--gutter);overflow:hidden} .gate__in{position:relative;z-index:2;width:min(430px,100%);text-align:center} .gate .display{font-size:clamp(2.9rem,10vw,4.6rem)} .gate form{margin-top:2.4rem;display:grid;gap:.7rem} .gate input{ width:100%;font:400 1rem/1 var(--sans);color:var(--ink);text-align:center; padding:1.05rem 1.2rem;border-radius:999px;border:0;background:var(--shell); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 15%,transparent); } .gate input::placeholder{color:var(--ink-3)} .err{color:var(--olive);font-size:.86rem;margin:.3rem 0 0;min-height:1.3em} } @layer utils { .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .mt0{margin-top:0}.mb0{margin-bottom:0} .center{text-align:center} .center p,.center .lede,.center .statement{margin-inline:auto} .center .lede{max-width:46ch} .center .statement{max-width:16ch} } /* gate gets its own drift layer above its backdrop */ .drifts--gate{position:absolute;z-index:1} /* ══════════════════════════════════════════════════════════════ Inner pages — the day, getting there, rsvp, admin. Same tokens, same layer, so the landing page stays the source of truth for the look. ══════════════════════════════════════════════════════════════ */ @layer components { /* ── subpage header ── */ .hero--sub{min-height:auto;padding-block:clamp(3.4rem,11vh,6.4rem) clamp(1.6rem,4vw,2.8rem)} .hero--sub + section{padding-top:calc(var(--shelf) * .6)} /* title on the left, a photo on the right; the photo drops under the title once there's no room beside it (tablets and phones) */ .hero--photo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.6rem);align-items:center} .hero__photo{width:100%;height:auto;aspect-ratio:6/5;object-fit:cover; border-radius:var(--r); box-shadow:0 1px 2px rgba(33,40,28,.06),0 18px 40px -18px rgba(33,40,28,.3)} @media(max-width:1023px){ .hero--photo{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem)} } .display--sm{font-size:clamp(2.9rem,8.5vw,6.2rem); font-variation-settings:'opsz' 96,'SOFT' 40,'WONK' 1} /* ── panel ── */ .plaque{background:var(--shell);border-radius:var(--r); padding:clamp(1.5rem,3.4vw,2.4rem); box-shadow:0 1px 2px rgba(33,40,28,.05),0 14px 36px -16px rgba(33,40,28,.18)} /* ── layout helpers ── */ .split{display:grid;gap:clamp(1.6rem,4vw,3.2rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start} .stack{display:flex;flex-direction:column;gap:clamp(1rem,2.2vw,1.5rem)} /* ── schedule ── */ .rail{margin:1.8rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:0 1.4rem} .rail dt,.rail dd{padding:.85rem 0; border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent)} .rail dt{font:500 .74rem/1.9 var(--sans);letter-spacing:.14em;color:var(--leaf); font-variant-numeric:tabular-nums} .rail dd{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)} .rail dt:first-of-type,.rail dd:first-of-type{border-top:0} /* ── cards ── */ .cards{display:grid;gap:clamp(1rem,2.4vw,1.5rem)} .card{background:var(--shell);border-radius:var(--r);padding:clamp(1.4rem,3vw,2rem); box-shadow:0 1px 2px rgba(33,40,28,.05),0 12px 30px -16px rgba(33,40,28,.16)} .card p:last-child{margin-bottom:0} .card__i{width:34px;height:34px;fill:var(--leaf);margin-bottom:.9rem;display:block} .card--accent{background:var(--leaf);color:var(--shell)} .card--accent h3{color:var(--shell)} .card--accent p{color:color-mix(in srgb,var(--shell) 88%,transparent)} .card--accent a{color:var(--shell)} .card--accent .card__i{fill:var(--shell);opacity:.9} /* ── colour swatches ── */ .swatches{display:grid;gap:clamp(.9rem,2vw,1.3rem); grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:1.4rem} .sw{display:flex;gap:.85rem;align-items:flex-start} .sw__chip{width:44px;height:44px;border-radius:10px;flex:none; box-shadow:inset 0 0 0 1px rgba(33,40,28,.12)} .sw__cap{font-size:.86rem;line-height:1.45;color:var(--ink-2)} .sw__cap b{display:block;font:500 .66rem/1.6 var(--sans);letter-spacing:.16em; text-transform:uppercase;color:var(--leaf)} /* ── callout ── */ .note{margin-top:clamp(1.8rem,4vw,2.6rem); padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,3vw,1.8rem); background:color-mix(in srgb,var(--leaf) 8%,var(--shell)); border-left:2px solid var(--leaf);border-radius:0 var(--r) var(--r) 0} .note p{margin-bottom:0;font-size:.96rem;line-height:1.6;color:var(--ink-2)} .note--warn{background:color-mix(in srgb,var(--gold) 13%,var(--shell)); border-left-color:var(--gold)} /* ── forms ── */ .field{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink); padding:.92rem 1.05rem;background:var(--shell); border:1.5px solid color-mix(in srgb,var(--ink) 15%,transparent); border-radius:10px; transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .field:focus{outline:0;border-color:var(--leaf); box-shadow:0 0 0 3px color-mix(in srgb,var(--leaf) 22%,transparent)} .field::placeholder{color:var(--ink-3)} .field[type=search]{-webkit-appearance:none;appearance:none} /* Safari rounds and shrinks search boxes */ .lbl{display:block;font:500 .72rem/1.6 var(--sans);letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem} .row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .row .field{flex:1;min-width:200px} .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem} .extras{margin-top:1.4rem} .seg{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%,transparent); border-radius:999px;padding:3px;gap:2px} .seg button{all:unset;cursor:pointer;padding:.5rem 1.1rem;border-radius:999px; font:500 .88rem/1 var(--sans);color:var(--ink-2); transition:background .2s var(--ease),color .2s var(--ease)} .seg button[aria-pressed=true]{background:var(--leaf);color:var(--shell)} /* ── guests ── */ .people{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem} .person{padding:1.05rem 1.2rem;background:var(--shell);border-radius:var(--r); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent)} .person__head{display:flex;justify-content:space-between;align-items:center; gap:1rem;flex-wrap:wrap} .person__name{font-family:var(--serif);font-size:1.3rem;letter-spacing:-.012em; font-variation-settings:'opsz' 40,'SOFT' 30,'WONK' 1} .person__tag,.tag{font:500 .64rem/1.6 var(--sans);letter-spacing:.16em; text-transform:uppercase;color:var(--leaf)} .tag{display:inline-block;line-height:1;white-space:nowrap;padding:.36rem .6rem;border-radius:999px; background:color-mix(in srgb,var(--leaf) 15%,transparent);color:var(--leaf-d)} /* search hits are