/* R16 gift guide: the gift card hero, two ways to give and scene ideas.
   The FAQ and closing call reuse the homepage sections (home16.css). */
.gift16 main{display:block}

/* ---- 1 · Hero ---- */
.gg-hero{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(72px,9vw,128px);background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);overflow:hidden;isolation:isolate}
.gg-hero .v-atmos{z-index:-1;opacity:.7}
.gg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy stage" "give stage";column-gap:clamp(32px,6vw,104px);align-items:start}
.gg-copy{grid-area:copy}
.gg-stage{grid-area:stage}
.gg-give{grid-area:give;scroll-margin-top:96px}
.gg-copy .v-display{font-size:clamp(2.9rem,6.2vw,5.8rem)}
.gg-copy .v-lede{max-width:40ch}
.gg-line>span{animation:gg-up 1.1s var(--ease-out) forwards;animation-delay:calc(.15s + var(--d,0) * 120ms)}
@keyframes gg-up{to{transform:none}}
.gg-rise{opacity:0;transform:translateY(14px);animation:gg-rise .9s var(--ease-out) forwards;animation-delay:calc(.2s + var(--d,0) * 120ms)}
@keyframes gg-rise{to{opacity:1;transform:none}}
.gg-facts{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.gg-facts li{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(255,253,249,.7);border:1px solid var(--line);font-weight:600;font-size:.88rem}
.gg-facts svg{width:15px;height:15px;color:var(--rust)}

/* The stage: a framed portrait with the gift card leaning in front of it. */
.gg-stage{position:relative;width:100%;max-width:580px;aspect-ratio:1/1.02;justify-self:center;align-self:center;margin-top:clamp(0px,2vw,24px)}
.gg-frame{position:absolute;right:4%;top:0;width:56%;height:auto;rotate:2.5deg;filter:drop-shadow(0 34px 40px rgba(22,17,13,.3));animation:gg-float 8s ease-in-out infinite}
.gg-card{position:absolute;left:0;bottom:6%;width:74%;aspect-ratio:1.586;border-radius:clamp(14px,1.8vw,22px);overflow:hidden;rotate:-7deg;color:#f1e7d8;
  background:radial-gradient(120% 100% at 12% 0%,#33271d 0%,#1d1611 46%,var(--night) 100%);
  box-shadow:inset 0 0 0 1px rgba(217,193,150,.3),inset 0 1px 0 rgba(255,240,210,.12),0 2px 6px rgba(22,17,13,.2),0 44px 70px -26px rgba(22,17,13,.65);
  animation:gg-float 7s ease-in-out -2.5s infinite}
.gg-card::after{content:"";position:absolute;inset:-40% -70%;background:linear-gradient(100deg,transparent 42%,rgba(255,236,200,.16) 50%,transparent 58%);animation:gg-sheen 7s var(--ease) 1.2s infinite;pointer-events:none}
.gg-card-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:7% 8%}
.gg-card-face>img{width:30%;height:auto}
.gg-card-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.gg-card-kind{font:600 clamp(.5rem,1vw,.7rem)/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.gg-card-amt{font:italic 500 clamp(2rem,4.6vw,3.8rem)/.9 var(--disp);font-variation-settings:'opsz' 144,'SOFT' 100;color:#fff8ee;transition:opacity .3s}
.gg-card-amt:empty{display:none}
@keyframes gg-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes gg-sheen{0%,62%{transform:translateX(-55%)}100%{transform:translateX(55%)}}

@media (max-width:900px){
  .gg-hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "give"}
  .gg-copy .v-display{font-size:clamp(2.6rem,11.5vw,4rem)}
  .gg-stage{max-width:400px;aspect-ratio:1/.7;margin:24px auto 0}
  .gg-frame{width:38%;right:8%}
  .gg-card{width:68%;bottom:6%;left:2%}
}

/* ---- 2 · Two ways to give ---- */
.gg-ways{padding:clamp(72px,10vw,140px) 0 clamp(56px,7vw,96px);background:var(--cream)}
.gg-ways-head{max-width:760px;margin-bottom:clamp(30px,4.5vw,56px)}
.gg-ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,28px)}
.gg-way{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,4vw,52px);border-radius:var(--r-lg)}
.gg-way .v-eyebrow{margin:0}
.gg-way p{margin:0;max-width:46ch;color:var(--ink-2)}
.gg-way.dark{background:var(--night);color:#f1e7d8;box-shadow:var(--shadow-lift)}
.gg-way.dark p:not(.v-eyebrow){color:rgba(241,231,216,.82)}
.gg-way.light{background:var(--paper);border:1px solid var(--line)}
.gg-way ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:10px}
.gg-way li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.gg-way li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--rust)}
.gg-way.dark li svg{color:var(--gold-soft)}
.gg-way .v-link{align-self:flex-start;margin-top:auto;padding-top:16px}
.gg-way.dark .v-link{color:#fff8ee}
@media (max-width:820px){.gg-ways-grid{grid-template-columns:1fr}}

/* ---- 3 · Scene ideas ---- */
.gg-scenes{padding:clamp(40px,6vw,80px) 0 clamp(80px,11vw,150px);background:var(--cream)}
.gg-scenes-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 24px;margin-bottom:clamp(28px,4vw,48px)}
.gg-scene-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.gg-scene a{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.gg-scene-art{display:grid;place-items:center;aspect-ratio:4/5;margin-bottom:10px;padding:12% 16%;border-radius:var(--r);background:radial-gradient(90% 70% at 30% 20%,#fffaf2,var(--sand));transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.gg-scene-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(22,17,13,.28));transition:transform .55s var(--ease)}
.gg-scene a:hover .gg-scene-art{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.gg-scene a:hover .gg-scene-art img{transform:scale(1.03)}
.gg-scene b{font:500 clamp(1.1rem,1.6vw,1.3rem)/1.2 var(--disp)}
.gg-scene small{color:var(--muted);font-size:.9rem;line-height:1.35}
@media (max-width:900px){.gg-scene-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){.gg-rise{opacity:1;transform:none}.gg-line>span{transform:none}.gg-frame,.gg-card,.gg-card::after{animation:none}}