/* Cielito · home */

/* ---------- hero: a bright morning ---------- */
.hero{position:relative;height:540vh;background:#fff3dc}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:
    radial-gradient(60% 55% at 88% 6%,rgba(255,214,120,.75) 0%,rgba(255,214,120,0) 70%),
    radial-gradient(70% 60% at 6% 100%,rgba(240,145,108,.28) 0%,rgba(240,145,108,0) 70%),
    radial-gradient(60% 50% at 40% 92%,rgba(87,196,229,.18) 0%,rgba(87,196,229,0) 70%),
    linear-gradient(180deg,#fff7e3 0%,#ffefd0 55%,#fde5cf 100%)}
/* soft sun discs drifting behind everything */
.sun{position:absolute;inset:0;pointer-events:none}
.sun i{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:float 18s ease-in-out infinite alternate}
.sun i:nth-child(1){width:46vmax;height:46vmax;right:-12vmax;top:-18vmax;background:radial-gradient(circle,rgba(255,206,84,.55),rgba(255,206,84,0) 68%)}
.sun i:nth-child(2){width:28vmax;height:28vmax;left:-8vmax;bottom:-10vmax;background:radial-gradient(circle,rgba(236,147,164,.42),rgba(236,147,164,0) 68%);animation-duration:22s;animation-delay:-6s}
.sun i:nth-child(3){width:22vmax;height:22vmax;left:38%;top:58%;background:radial-gradient(circle,rgba(134,207,189,.35),rgba(134,207,189,0) 68%);animation-duration:26s;animation-delay:-11s}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(3vmax,-2vmax,0)}}

.filmclip{position:absolute;inset:0;z-index:2;clip-path:inset(100%);-webkit-clip-path:inset(100%);background:#f3dcc0}
.film{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;display:block}
.wash{position:absolute;inset:0;background:var(--masa);opacity:0;pointer-events:none;z-index:3}

/* flags and (daytime, unlit) bulbs */
.flags{position:absolute;inset:0;pointer-events:none;transform-origin:50% 0;will-change:transform;z-index:4}
.string{position:absolute;inset:0;transform:translateY(-130%);transition:transform 1.4s cubic-bezier(.2,1.3,.4,1) var(--sd,0s)}
.stage.lit .string{transform:none}
.string svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.flag{position:absolute;transform-origin:50% 0;transform:rotate(calc(var(--tilt,0deg) + var(--wind,0) * var(--f,1) * 1deg));filter:drop-shadow(0 5px 6px rgba(51,34,26,.16))}
.flag svg{position:static;display:block;width:100%;height:auto;transform-origin:50% 0;animation:sway var(--s,5s) ease-in-out var(--dl,-1s) infinite alternate}
@keyframes sway{from{transform:rotate(-4deg) skewX(2deg)}to{transform:rotate(4deg) skewX(-2deg)}}
.bulb{position:absolute;width:var(--b,14px);height:calc(var(--b,14px)*1.35);margin-left:calc(var(--b,14px)/-2);border-radius:50% 50% 46% 46%/42% 42% 58% 58%;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(51,34,26,.25),inset -2px -2px 0 rgba(255,255,255,.6)}
.bulb::before{content:"";position:absolute;left:28%;right:28%;top:-22%;height:26%;background:#33221a;border-radius:2px}

/* copy bands */
.band{position:absolute;opacity:0;pointer-events:none;z-index:5;color:var(--cocoa)}
.band.live{pointer-events:auto}
.band h2{font-size:clamp(46px,6vw,96px);line-height:1}
.band p{margin:12px 0 0;font-size:clamp(18px,1.5vw,22px);line-height:1.45;font-weight:500;color:var(--cocoa-soft)}

.b-intro{left:var(--gutter);top:54%;transform:translateY(-50%);width:min(46vw,640px)}
.greet{font-weight:600;font-size:clamp(15px,1.15vw,17px)!important;margin:0 0 2px!important;color:#b5701c!important;opacity:0;transition:opacity 1s var(--ease) .5s}
.welcome{font-size:clamp(72px,9.4vw,156px)!important;line-height:1.08!important;margin:0!important;padding:.06em .18em .2em 0;color:var(--cocoa)!important;clip-path:inset(0 100% 0 0);transition:clip-path 2s var(--ease-soft) .55s;position:relative}
.welcome::after{content:"";position:absolute;left:4%;right:12%;bottom:.16em;height:.09em;border-radius:99px;background:linear-gradient(90deg,var(--marigold),var(--coral),var(--pink));opacity:.85}
.intro-h{font-size:clamp(24px,2.3vw,36px);line-height:1.15;margin:-.12em 0 0;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease) 1.7s,transform 1s var(--ease) 1.7s}
.intro-h span{font-weight:400}
.intro-p{max-width:31em;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease) 1.95s,transform 1s var(--ease) 1.95s}
.intro-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease) 2.2s,transform 1s var(--ease) 2.2s}
.cue{display:flex;align-items:center;gap:14px;margin-top:28px!important;opacity:0;transition:opacity 1s var(--ease) 2.8s}
.cue .script{font-size:30px;color:#b5701c}
.cue i{display:block;width:1.5px;height:42px;background:#b5701c;transform-origin:top;animation:cue 2.4s var(--ease) -1s infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.stage.lit .greet,.stage.lit .cue{opacity:1}
.stage.lit .welcome{clip-path:inset(0 -6% 0 -6%)}
.stage.lit .intro-h,.stage.lit .intro-p,.stage.lit .intro-cta{opacity:1;transform:none}

/* desktop: the words stand on the sunny page beside the arch */
.b-mid h2,.b-mid p{transform:translateY(calc((1 - var(--k,1))*18px))}
.b-left{left:var(--gutter);top:50%;margin-top:-80px;width:calc(50vw - 25vh - var(--gutter) - 30px)}
.b-right{right:var(--gutter);top:50%;margin-top:-80px;width:calc(50vw - 25vh - var(--gutter) - 30px);text-align:right}
.b-right h2{font-size:clamp(58px,6.6vw,112px);line-height:1.15;color:#b5701c}
.b-arrive{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding:0 var(--gutter)}
.b-arrive h2{font-size:clamp(56px,10vw,150px)}
.b-arrive h2 em{color:#b5701c}
.b-arrive p{font-family:var(--script);font-weight:400;font-size:clamp(30px,3.4vw,46px);color:var(--cocoa);margin-top:8px}
.b-arrive .ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-height:720px) and (min-width:900px){.b-intro{top:56%}.welcome{font-size:clamp(64px,7.6vw,118px)!important}.cue{display:none}}

/* phones and portrait: words over the film, on a soft shade */
@media (max-width:899px),(max-aspect-ratio:11/10){
  .hero{height:470vh}
  .b-intro{top:calc(var(--nav-h) + 66px);transform:none;left:0;right:0;width:auto;padding:0 var(--gutter);text-align:center}
  .welcome{font-size:clamp(60px,17vw,120px)!important;padding:.04em .14em .16em}
  .welcome::after{left:12%;right:12%}
  .intro-h{font-size:clamp(20px,5.2vw,30px)}
  .intro-p{font-size:15px!important;margin:6px auto 0!important;max-width:25em}
  .intro-cta,.cue{display:none}
  .b-mid{left:0!important;right:0!important;top:auto!important;bottom:0;margin:0!important;width:auto!important;padding:120px var(--gutter) 13vh;text-align:center!important;background:linear-gradient(to top,rgba(23,16,11,.8),rgba(23,16,11,.45) 55%,rgba(23,16,11,0))}
  .b-mid h2{color:#fff7e8!important}
  .b-mid p{color:#f4e6cd}
}
@media (max-width:899px) and (max-height:760px){.intro-p{display:none}.b-intro{top:calc(var(--nav-h) + 58px)}}
/* reduced motion: a still welcome */
.hero-static .hero{height:auto}
.hero-static .stage{position:relative;height:auto;min-height:100vh}
.hero-static .band:not(.b-intro),.hero-static .wash,.hero-static .cue{display:none}
.hero-static .b-intro{opacity:1;pointer-events:auto}
.hero-static .intro-cta{display:flex}

/* ---------- scrapbook snapshots ---------- */
.snap{position:relative;margin:0;background:#fffdf7;padding:10px 10px 44px;box-shadow:0 18px 44px rgba(51,34,26,.2),0 2px 6px rgba(51,34,26,.12);transform:rotate(var(--r,0deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease),opacity .8s var(--ease)}
.snap.rv{transform:translateY(22px) rotate(var(--r,0deg))}
.in .snap.rv{transform:rotate(var(--r,0deg))}
.done .snap.rv:hover,.snap:hover{transform:rotate(0deg) scale(1.025);box-shadow:0 26px 60px rgba(51,34,26,.26)}
.snap::before{content:"";position:absolute;left:50%;top:-13px;width:96px;height:28px;margin-left:-48px;background:var(--tape,var(--sun));opacity:.82;transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(51,34,26,.14);z-index:1}
.snap img{width:100%;aspect-ratio:4/5;object-fit:cover}
.snap figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:25px;color:#6d4a22;line-height:1.2}

/* ---------- antojo ---------- */
.antojo{padding-top:clamp(36px,5vw,70px)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 36px}
.chip{min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--paper);font-weight:600;cursor:pointer;transition:background-color .25s,color .25s,transform .25s var(--ease),border-color .25s}
.chip:hover{transform:translateY(-2px);border-color:var(--cocoa)}
.chip[aria-checked="true"]{background:var(--cocoa);color:var(--paper);border-color:var(--cocoa)}
.antojo__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.tile{display:flex;flex-direction:column;animation:tileIn .6s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tile__img{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--crust)}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.05)}
.tile__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:14px}
.tile p{margin:4px 0 12px;color:var(--cocoa-soft);font-size:16px}
.tile__ctl{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap;align-items:center}
select[data-opt]{font:inherit;font-size:15px;min-height:42px;padding:0 32px 0 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2333221a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 13px center;-webkit-appearance:none;appearance:none;color:var(--cocoa);max-width:100%}
@media (max-width:760px){.antojo__cards{grid-template-columns:1fr}.tile__img{aspect-ratio:4/3}}
.flagline{overflow:hidden;line-height:0}

/* ---------- bakery ---------- */
.bake{padding-top:clamp(48px,7vw,90px)}
.bake__wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:center}
.snap--big{max-width:520px;justify-self:center;width:100%}
.plist{list-style:none;margin:24px 0;padding:0}
.plist li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.plist b{font-weight:600}
.plist .add{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-strong);background:none;cursor:pointer;font-size:19px;line-height:1;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.plist .add:hover{background:var(--marigold);border-color:var(--marigold);transform:scale(1.08)}
@media (pointer:coarse){.plist .add{width:44px;height:44px}}
.plist--light li{border-color:rgba(255,243,223,.2)}
.plist--light .add{border-color:rgba(255,243,223,.55)}
.plist--light .add:hover{color:var(--cocoa)}
@media (max-width:860px){.bake__wrap{grid-template-columns:1fr}}

/* ---------- cakes ---------- */
.cakes{background:linear-gradient(180deg,#fde4e7 0%,#fbeef0 60%,var(--masa) 100%);padding-top:0;overflow:hidden}
.cakes__flags{line-height:0;margin-bottom:clamp(40px,6vw,80px)}
.cakes .kicker{color:#c04f6a}
.cakes h2 em{color:#c04f6a}
.cakes__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}
.cakes .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cakes__case{margin:34px 0 0;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.cakes__case img{width:110px;aspect-ratio:3/4;object-fit:cover;object-position:50% 38%;border-radius:999px 999px 14px 14px;box-shadow:0 10px 26px rgba(51,34,26,.18)}
.cakes__case figcaption{font-size:15px;color:var(--cocoa-soft)}
.cakes__art{position:relative;min-height:clamp(480px,50vw,680px)}
.cakes__art .snap{position:absolute;width:50%}
.cakes__art .snap:nth-child(1){left:0;top:4%}
.cakes__art .snap:nth-child(2){right:0;top:0;width:47%}
.cakes__art .snap:nth-child(3){left:26%;bottom:0;width:46%}
.cakes__art .snap:nth-child(1) figcaption{text-align:left;padding-left:16px}
.cakes__art .snap:nth-child(2) figcaption{text-align:right;padding-right:16px}
@media (max-width:860px){.cakes__wrap{grid-template-columns:1fr}.cakes__art{min-height:122vw}}

/* ---------- about: the owners, center stage ---------- */
.about{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(80px,10vw,130px);background:var(--paper);text-align:center;overflow:hidden}
.about::before{content:"";position:absolute;left:50%;top:-30vmax;width:90vmax;height:90vmax;margin-left:-45vmax;border-radius:50%;background:radial-gradient(circle,rgba(242,182,50,.18),rgba(242,182,50,0) 62%);pointer-events:none}
.about__head{position:relative;max-width:900px;margin:0 auto}
.about__head h2{font-size:clamp(40px,5.6vw,80px)}
.about__head h2 em{color:#b5701c}
.about__photo{position:relative;margin:clamp(36px,5vw,64px) auto 0;max-width:980px;background:#fffdf7;padding:14px 14px 64px;box-shadow:0 30px 80px rgba(51,34,26,.22),0 2px 8px rgba(51,34,26,.1);transform:rotate(-1deg)}
.about__photo.rv{transform:translateY(26px) rotate(-1deg)}
.in .about__photo.rv{transform:rotate(-1deg)}
.about__photo::before,.about__photo::after{content:"";position:absolute;top:-14px;width:120px;height:30px;background:var(--sun);opacity:.85;box-shadow:0 1px 2px rgba(51,34,26,.14)}
.about__photo::before{left:8%;transform:rotate(-4deg)}
.about__photo::after{right:8%;transform:rotate(3deg);background:var(--sky)}
.about__photo img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:50% 70%}
.about__photo figcaption{position:absolute;left:0;right:0;bottom:12px;font-size:clamp(24px,2.4vw,32px);color:#6d4a22}
.about__story{position:relative;max-width:860px;margin:clamp(40px,5vw,64px) auto 0}
.about__lead{font-family:var(--display);font-size:clamp(23px,2.3vw,32px);line-height:1.4;margin:0;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 0}
.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);margin-top:28px;text-align:left}
.about__cols p{margin:0;font-size:clamp(17px,1.35vw,19px);color:var(--cocoa-soft);line-height:1.7}
.about__sign{font-size:clamp(34px,3.6vw,52px);color:#b5701c;margin:36px 0 0}
@media (max-width:720px){.about__cols{grid-template-columns:1fr}.about__photo img{aspect-ratio:4/5;object-position:52% 78%}}

/* ---------- hecho a mano ---------- */
.mano{background:var(--cocoa);color:#fff3df}
.mano .kicker{color:var(--sun)}
.mano .lede{color:#e3d1b8}
.mano h2 em{color:var(--sun)}
.mano__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
.mano__art{position:relative;min-height:clamp(440px,48vw,640px)}
.mano__art .snap{position:absolute;width:52%}
.mano__art .snap:nth-child(1){left:0;top:0}
.mano__art .snap:nth-child(2){right:0;top:9%}
.mano__art .snap:nth-child(3){left:23%;bottom:0;width:50%}
.mano__art .snap:nth-child(1) figcaption{text-align:left;padding-left:16px}
.mano__art .snap:nth-child(2) figcaption{text-align:right;padding-right:16px}
@media (max-width:860px){.mano__wrap{grid-template-columns:1fr}.mano__art{min-height:118vw}}

/* ---------- mornings ---------- */
.morning__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:center}
.morning__art{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px)}
.morning__art .snap:nth-child(2){margin-top:44px}
.named{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.named p{grid-column:1/-1;margin:0 0 10px;color:var(--cocoa-soft)}
.named .btn{justify-self:start}
@media (max-width:860px){.morning__wrap{grid-template-columns:1fr}}

/* ---------- weekend ---------- */
.weekend{background:var(--marigold);color:var(--cocoa);padding:0 0 clamp(60px,8vw,104px);text-align:center;overflow:hidden}
.weekend__flags{margin-bottom:clamp(30px,5vw,60px);line-height:0}
.weekend__k{font-weight:600;margin:0 0 8px;font-size:18px}
.weekend__list{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:0 clamp(20px,4vw,56px);font-family:var(--script);font-size:clamp(46px,7.2vw,104px);line-height:1.25}
.weekend__p{margin:18px auto 0;max-width:40em;font-size:clamp(17px,1.5vw,20px)}

/* ---------- inside gallery ---------- */
.inside__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.inside__head .lede{margin:0}
.inside__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,13vw,190px);gap:clamp(10px,1.4vw,18px)}
.ig{position:relative;margin:0;overflow:hidden;border-radius:20px;background:var(--crust)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ig:hover img{transform:scale(1.045)}
.ig figcaption{position:absolute;left:12px;bottom:12px;background:rgba(254,248,236,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
.ig--a{grid-column:1/3;grid-row:1/4}
.ig--a img{object-position:50% 45%}
.ig--b{grid-column:3/5;grid-row:1/3}
.ig--b img{object-position:50% 55%}
.ig--c{grid-column:5/7;grid-row:1/3}
.ig--c img{object-position:50% 40%}
.ig--d{grid-column:3/4;grid-row:3/4}
.ig--d img{object-position:50% 35%}
.ig--e{grid-column:4/7;grid-row:3/4}
@media (max-width:760px){
  .inside__head{grid-template-columns:1fr}
  .inside__grid{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}
  .ig--a{grid-column:1/2;grid-row:span 2}.ig--b{grid-column:2/3;grid-row:span 1}.ig--c{grid-column:2/3;grid-row:span 1}.ig--d{grid-column:1/2;grid-row:span 1}.ig--e{grid-column:2/3;grid-row:span 1}
  .ig figcaption{font-size:12.5px;left:8px;bottom:8px;padding:4px 10px}
}

/* ---------- reviews ---------- */
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 24px;align-items:start}
.review{margin:0;background:var(--paper);border-radius:20px;padding:24px;box-shadow:0 12px 34px rgba(51,34,26,.07);display:flex;flex-direction:column;gap:12px}
.review .stars{color:var(--marigold-deep);letter-spacing:2px;font-size:18px}
.review blockquote{margin:0;font-family:var(--display);font-size:19px;line-height:1.45;font-variation-settings:"SOFT" 100}
.review cite{font-style:normal;font-weight:600;font-size:15px;color:var(--cocoa-soft);margin-top:auto}
@media (max-width:860px){.reviews__grid{grid-template-columns:1fr}}

/* ---------- visit + pickup ---------- */
.visit__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:center}
.visit__media{position:relative;max-width:560px;width:100%}
.visit__arch{width:74%;aspect-ratio:3/4.3;border-radius:999px 999px 20px 20px;overflow:hidden;background:var(--crust);box-shadow:0 26px 60px rgba(51,34,26,.24)}
.visit__arch img{width:100%;height:100%;object-fit:cover;object-position:38% 60%}
.visit__inside{position:absolute;right:0;bottom:-7%;width:46%}
.visit__inside img{aspect-ratio:1/1;object-position:50% 72%}
.visit__addr{font-size:clamp(20px,2vw,26px);line-height:1.5;margin:18px 0 10px;font-family:var(--display)}
.visit__addr a{text-decoration:none;border-bottom:1.5px solid rgba(181,112,28,.4)}
.visit__pickup{margin:0 0 6px;font-size:18px}
.visit__pay,.visit__social{color:var(--cocoa-soft);margin:0 0 6px;font-size:16px}
.visit .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media (max-width:860px){.visit__wrap{grid-template-columns:1fr}.visit__media{margin-bottom:40px}}

@media (prefers-reduced-motion:reduce){.flag svg,.sun i{animation:none}.string{transform:none}.welcome{clip-path:none}.greet,.intro-h,.intro-p,.intro-cta{opacity:1;transform:none}}

/* ---------- hero food stickers: pop in, then drift away as you walk ---------- */
.stickers{position:absolute;inset:0;z-index:4;pointer-events:none;--out:0}
.stk{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;background:#fff;padding:6px;box-shadow:0 14px 34px rgba(51,34,26,.22),0 2px 6px rgba(51,34,26,.12);
  transform:translate3d(calc(var(--out)*var(--dx)),calc(var(--out)*var(--dy)),0) rotate(var(--r)) scale(0);opacity:calc(1 - var(--out)*1.1);transition:transform .9s cubic-bezier(.2,1.5,.4,1) var(--d,1s)}
.stage.lit .stk{transform:translate3d(calc(var(--out)*var(--dx)),calc(var(--out)*var(--dy)),0) rotate(var(--r)) scale(1)}
.stage.lit.scrolling .stk{transition:none}
.stk img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.stk::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(51,34,26,.06)}
@media (max-width:899px),(max-aspect-ratio:11/10){
  .stk{--s:78px!important}
  .stk:nth-child(1){left:12%;top:62%}
  .stk:nth-child(2){left:88%;top:60%}
  .stk:nth-child(3),.stk:nth-child(4){display:none}
}

/* ---------- ribbons ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:16px 0;font-family:var(--script);font-size:clamp(28px,3.2vw,44px);line-height:1.2;transform:rotate(-1.2deg);margin:0 -2vw;position:relative;z-index:2}
.marquee--sun{background:var(--marigold);color:var(--cocoa);box-shadow:0 10px 30px rgba(221,156,20,.22)}
.marquee--pink{background:var(--pink);color:#fff;transform:rotate(1deg);margin-top:-10px;margin-bottom:-10px}
.marquee__track{display:inline-flex;animation:marq 38s linear infinite}
.marquee__track--rev{animation-direction:reverse;animation-duration:44s}
.marquee span{padding-right:.4em}
.marquee i{font-style:normal;font-family:var(--body);font-size:.55em;vertical-align:middle;margin:0 .5em;opacity:.8}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- soft waves between colored sections ---------- */
.mano,.weekend{position:relative}
.wave{position:absolute;left:0;width:100%;height:clamp(28px,4vw,60px);display:block;pointer-events:none}
.wave--top{top:calc(clamp(28px,4vw,60px) * -1 + 1px)}
.mano .wave path{fill:var(--cocoa)}
.weekend .wave path{fill:var(--marigold)}
.weekend{overflow:visible}
.weekend__flags{overflow:hidden}

/* richer cards and frames */
.tile__img,.ig{box-shadow:0 18px 40px rgba(51,34,26,.12)}
.antojo__cards .tile{transition:transform .5s var(--ease)}
.antojo__cards .tile:hover{transform:translateY(-6px)}
.about__photo img{filter:saturate(1.04)}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.stk{transform:rotate(var(--r)) scale(1)}}