/* The Cardoza events pages, v3 "Last Light" (stamped 2026-10-22, brand/events/BRIEF.md).
   References Alex picked: White Desert (one giant word over a full-bleed photo) + Velaa (a signed note on bare paper).
   Phone first. Motion is opt-in. RASTER-ONCE: every photo grade and haze is baked into the files. */
:root{--paper:#E9E7E1;--night:#161A26;--dusk:#91A4B3;--light:#DFB594;--light-edge:#B48A69;--ink-soft:#4A5163;
  --ease:cubic-bezier(.22,1,.36,1);--sun:247,236,208;--g:16px}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--paper);font:400 17px/1.45 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.cta{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 24px;background:var(--light);color:var(--night);
  font:600 17px "Archivo";border-radius:2px;text-decoration:none;text-shadow:none;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--light-edge),0 10px 30px -12px rgba(22,26,38,.7)}
.cta svg{width:16px;height:16px;flex:none}
.cta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.label{font:600 12px/1.3 "Archivo";letter-spacing:.16em;text-transform:uppercase}

/* MATERIAL 1: the opening. One real evening at last light, one giant word, the near posts standing in front of it. */
.open{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--g)}
.open>*{position:relative;z-index:3}
.open .ph,.open .ph img{position:absolute;z-index:0;inset:0;width:100%;height:100%}
.open .ph img{object-fit:cover;object-position:64% 50%;transform:scale(var(--k,1));transform-origin:var(--ox,64%) var(--oy,55%)}
.open .glow{position:absolute;z-index:1;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(55% 40% at var(--sx,8%) var(--sy,35%),rgba(223,181,148,.85),rgba(223,181,148,0) 70%)}
.open::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:radial-gradient(240px 110px at 100% 0,rgba(22,26,38,.7),rgba(22,26,38,0)),radial-gradient(36% 26% at 50% 0%,rgba(22,26,38,.7),rgba(22,26,38,0)),radial-gradient(42% 26% at 14% var(--cy,64%),rgba(22,26,38,var(--ca,.42)),rgba(22,26,38,0)),linear-gradient(rgba(22,26,38,.66),rgba(22,26,38,.3) 10%,rgba(22,26,38,0) 24%,rgba(22,26,38,0) 50%,rgba(22,26,38,.55) 78%,rgba(22,26,38,.7))}
/* visibility, not display: display:none cancels the push, so crossing 1024px restarted it out of step with the photo. */
.grain{position:absolute;z-index:5;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{position:absolute!important;z-index:6!important;left:var(--g);right:var(--g);top:14px;display:flex;justify-content:center;align-items:center;min-height:44px}
.mark{width:84px;filter:drop-shadow(0 1px 8px rgba(22,26,38,.35))}
.es{position:absolute;right:0;top:0;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:15px;text-underline-offset:5px;text-shadow:0 1px 12px rgba(22,26,38,.6)}
.copy{z-index:6!important;margin-bottom:28px;text-shadow:0 1px 22px rgba(22,26,38,.55)}
h1{font:700 26px/1.12 "Archivo";letter-spacing:-.01em;text-wrap:balance}
h2{text-wrap:balance}
.sub{margin-top:6px;font-size:17px}
.copy .cta{margin-top:18px}
/* THE WORD: optical kerning by hand for YOURS; the light is painted per letter in whole-word coordinates. */
.word{font:600 39.4vw/.72 "Archivo";position:relative;left:-.006em;font-variation-settings:"wdth" 62;letter-spacing:0;text-align:center;white-space:nowrap;margin:0 -.03em;
  --rw:2.3822em;--lx:5%;--ly:-250%;--lr:90% 400%;top:.085em}
.word span{display:inline-block;line-height:1.2;margin:-.24em 0;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(rgba(22,26,38,0) 64%,rgba(22,26,38,.13) 80%),radial-gradient(var(--lr) at var(--lx) var(--ly),rgba(var(--sun),.95),rgba(var(--sun),.7) 42%,rgba(var(--sun),0) 100%);
  background-color:var(--paper);background-size:var(--rw) 100%;background-position:calc(var(--x,0em)*-1) 0;background-repeat:no-repeat}
.word span:nth-child(1){letter-spacing:.004em;--i:0}.word span:nth-child(2){letter-spacing:-.012em;--i:1;--x:.4821em}
.word span:nth-child(3){letter-spacing:-.03em;--i:2;--x:1.0001em}.word span:nth-child(4){letter-spacing:.006em;--i:3;--x:1.4561em}
.word span:nth-child(5){--i:4;--x:1.9461em}
.word.fit span{letter-spacing:0!important;--x:0em!important;background-size:100% 100%}

/* MATERIAL 2: one evening, the giant word turned into the clock. Each frame carries its own time; frames dissolve. */
.eve{position:relative;background:var(--night)}
.eve .plate{position:absolute;z-index:4;left:var(--g);top:18px;color:var(--paper);text-shadow:0 0 18px rgba(22,26,38,.85),0 1px 3px rgba(22,26,38,.6)}
.eve .fr{position:relative;height:100svh;min-height:560px;overflow:hidden;margin:0}
.eve .fr picture,.eve .fr img{position:absolute;inset:0;width:100%;height:100%}
.eve .fr img{object-fit:cover}
.eve .fr::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,26,38,.55),rgba(22,26,38,0) 22%,rgba(22,26,38,0) 55%,rgba(22,26,38,.6));pointer-events:none}
.eve .t{position:absolute;z-index:2;left:0;right:0;bottom:-.05em;text-align:center;font:600 34vw/.72 "Archivo";font-variation-settings:"wdth" 62;letter-spacing:-.01em;color:var(--paper);white-space:nowrap}
.eve .t small{font-size:.22em;letter-spacing:.06em;margin-left:.2em;vertical-align:top}
.pin .eve{height:240svh}
.pin .eve .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.pin .eve .fr{position:absolute;inset:0;height:auto;opacity:0}
.pin .eve .fr:first-child{opacity:1}
/* Pinned: the photos dissolve, the clock does not. One clock above the stack flips at each half-way point. */
.eve .clock{display:none}
.pin .eve .clock{display:block;z-index:3}
.pin .eve .fr .t{display:none}

/* MATERIAL 3: night into paper, then his note (Velaa's mechanism). */
/* Eased in oklab (a straight 4-stop ramp showed its stops as bands), shorter, and grained like the opening. */
.fog{position:relative;overflow:hidden;height:24svh;background:linear-gradient(#161A26 0%,#1C202C 12%,#30333E 25%,#4F525A 38%,#76787D 50%,#A1A1A2 62%,#C6C5C3 75%,#E0DED9 88%,#E9E7E1 100%)}
.fog .grain{opacity:.06}
.note{background:var(--paper);color:var(--night);padding:48px var(--g) 88px}
.note .in{max-width:760px;margin:0 auto}
.note .letter{font:400 26px/1.32 "Archivo";letter-spacing:-.005em;max-width:24ch;text-wrap:pretty}
.note .hand{display:block;width:100%;height:auto}
/* Alex: signature "Just use a nice script" (his name only). A pen signature, not wedding calligraphy. */
.note .sig{margin-top:10px;font:400 64px/1 "Herr Von Muellerhoff","Archivo",cursive;width:max-content;transform:rotate(-4deg);transform-origin:0 50%}
.nw{white-space:nowrap}
.day{list-style:none;padding:0;margin:56px 0 0;border-top:1px solid rgba(22,26,38,.18)}
.day li{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(22,26,38,.18)}
.day .label{color:var(--ink-soft)}
.day p{font-size:20px}

/* MATERIAL 4: the holiday room, full, under the haze. */
.hol{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--g) 40px;overflow:hidden}
.hol picture,.hol>picture img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hol>picture img{object-fit:cover;object-position:50% 40%}
.hol::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(22,26,38,.25),rgba(22,26,38,.15) 30%,rgba(22,26,38,.78));pointer-events:none}
.hol>*:not(picture){position:relative;z-index:2}
.hol h2{font:700 clamp(40px,10vw,96px)/.98 "Archivo";font-variation-settings:"wdth" 75;letter-spacing:-.015em;max-width:12ch}
.proof{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px}
.hol .cta{margin-top:26px;align-self:flex-start}

/* Questions, on paper: answered in the open (each answer is one line, and the first one IS the offer). */
.qs{background:var(--paper);color:var(--night);padding:80px var(--g) 96px}
.qs .in{max-width:760px;margin:0 auto}
.qa{margin:0;border-top:1px solid rgba(22,26,38,.18)}
.qa div{padding:26px 0 28px;border-bottom:1px solid rgba(22,26,38,.18)}
.qa dt{font:700 28px/1.05 "Archivo";font-variation-settings:"wdth" 75;letter-spacing:-.01em;text-wrap:balance}
.qa dd{margin:10px 0 0;font-size:19px;line-height:1.4;color:var(--ink-soft)}

/* MATERIAL 5: the close, at 8:23 PM, where he finally appears. */
.close{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--g) 48px;overflow:hidden}
/* Only the FIRST picture is the backdrop; the second is his portrait and stays in flow (it was matching this rule and
   rendering as a full-height 132/160px sliver at the left edge, under the scrim). */
.close>picture:first-child,.close>picture:first-child img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.close>picture:first-child img{object-fit:cover}
.close::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(22,26,38,.05),rgba(22,26,38,.4) 45%,rgba(22,26,38,.86));pointer-events:none}
.close>*:not(:first-child){position:relative;z-index:2}
.close .me{width:132px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.close h2{margin-top:22px;font:700 clamp(36px,9vw,72px)/1 "Archivo";font-variation-settings:"wdth" 75;letter-spacing:-.015em}
.close .row{margin-top:24px;display:grid;gap:10px;max-width:520px}
.close label{display:block}
.close input{width:100%;height:54px;padding:0 14px;border:1px solid rgba(233,231,225,.55);border-radius:2px;background:rgba(22,26,38,.45);color:var(--paper);font:500 17px "Archivo";color-scheme:dark}
.close input:focus{outline:2px solid var(--paper);outline-offset:2px}
.close .note-es{margin-top:14px;font-size:15px;opacity:.85;max-width:44ch}

footer{background:var(--night);color:var(--dusk);padding:28px var(--g) 110px;font-size:13px}
footer .in{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center}
footer .ai{flex-basis:100%;font-size:12px;line-height:1.55;max-width:96ch}
footer a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;color:var(--paper)}

/* MATERIAL 6: the phone bar, frosted night; only after the first button leaves, hidden beside any inline button. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background:rgba(22,26,38,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(110%)}
.bar.on{transform:none}
.bar .cta{width:100%;justify-content:center}
.cz-cookie button{min-height:44px}
@media (max-width:1023px){.bar.on ~ .cz-cookie{bottom:calc(88px + env(safe-area-inset-bottom))!important}}

@media (min-width:1024px){
  :root{--g:40px}
  .open .ph img{object-position:100% var(--py,75%);--k:1.35;--ox:100%;--oy:15.4%}
  .open .glow{--sx:25%;--sy:31%}
  .open{--cy:56%;--ca:.56}
  .top{top:26px}
  .mark{width:120px}
  .copy{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
  h1{font-size:40px;letter-spacing:-.015em}
  .sub{font-size:20px;margin-top:8px}
  .copy .cta{margin:0}
  .word{font-size:31.6vw;font-variation-settings:"wdth" 84;left:.008em;margin-bottom:-.035em;top:.055em;--rw:3.0496em;--lx:23.8%;--ly:-48%;--lr:55% 120%}
  .word span:nth-child(2){--x:.5972em}.word span:nth-child(3){--x:1.2612em}.word span:nth-child(4){--x:1.855em}.word span:nth-child(5){--x:2.4799em}
  .eve .plate{top:28px}
  .eve .t{font-size:27vw;font-variation-settings:"wdth" 84}
  .note{padding:56px var(--g) 140px}
  .note .letter{font-size:44px;line-height:1.24}
  .note .sig{font-size:96px;margin-top:6px}
  .day{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:0}
  .day li{border-top:1px solid rgba(22,26,38,.18)}
  .hol{padding:0 var(--g) 64px}
  .qs{padding:120px var(--g) 136px}
  .qa div{padding:34px 0 36px}
  .qa dt{font-size:40px}
  .qa dd{font-size:21px;margin-top:12px}
  /* The close as one signed card: his portrait beside "15 minutes, with me." and the ask, bottom-aligned. */
  .close{display:grid;grid-template-columns:220px minmax(0,640px);grid-template-rows:1fr auto auto auto;column-gap:36px;justify-content:start;padding:0 var(--g) 72px}
  .close>picture:nth-child(2){grid-row:1/-1;align-self:end}
  .close .me{width:220px}
  .close h2{grid-column:2;grid-row:2;margin-top:0}
  .close .row{grid-column:2;grid-row:3}
  .close .note-es{grid-column:2;grid-row:4}
  .close .row{grid-template-columns:1fr auto;align-items:end;max-width:640px}
  .bar{display:none}
  footer{padding-bottom:28px}
}

@media (prefers-reduced-motion:no-preference){
  html:not(.static) .word span{animation:rise 1s var(--ease) both;animation-delay:calc(.15s + var(--i)*80ms)}
  html:not(.static) .open .ph img{animation:push 34s ease-in-out infinite alternate}
  html:not(.static) .grain{animation:grain .9s steps(8) infinite}
  .cta{transition:background .35s var(--ease),gap .35s var(--ease)}
  .cta:hover{background:var(--paper);gap:18px}
  .bar{transition:transform .3s var(--ease)}
  .roll{animation:roll .45s var(--ease)}
}
@keyframes rise{from{transform:translateY(.8em)}}
@keyframes push{to{scale:1.05}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(3%,1%)}}
@keyframes roll{from{transform:translateY(.4em);opacity:0}to{transform:none;opacity:1}}
.static *,.static *::before,.static *::after{animation:none!important;transition:none!important}