/* ===== Hero ===== */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 20px 32px}
.hero h1{font-size:clamp(2.8rem,6.6vw,5.2rem);max-width:10ch}
.hero-copy p{font-size:1.15rem;color:var(--muted);max-width:42ch;margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.has-photo-bg .hero-copy,.has-photo-bg .sec-head{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:22px 24px;border-radius:28px}
.stack{position:relative;height:420px}
.pol{position:absolute;margin:0;width:min(56%,250px);background:#fff;padding:12px 12px 46px;border-radius:4px;box-shadow:0 22px 44px -20px rgb(var(--shadow) / .5),0 2px 6px rgb(var(--shadow) / .12);transition:transform .35s var(--ease)}
.pol .ph{aspect-ratio:1;border-radius:2px;background-size:cover;background-position:center;display:grid;place-items:center;font-size:3.6rem}
.pol .cap{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:Caveat,cursive;font-size:1.4rem;color:#3a2a33}
.stack .pol:nth-child(1){left:2%;top:6%;transform:rotate(-8deg)}
.stack .pol:nth-child(2){right:2%;top:0;transform:rotate(6deg)}
.stack .pol:nth-child(3){left:24%;top:32%;transform:rotate(-1.5deg);z-index:2}
.stack:hover .pol:nth-child(1){transform:rotate(-11deg) translateX(-8px)}
.stack:hover .pol:nth-child(2){transform:rotate(9deg) translateX(8px)}
.stack-add{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;white-space:nowrap}
.stack-add:active{transform:translateX(-50%) scale(.97)}

/* ===== Sections ===== */
.section{padding:44px 20px}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:clamp(2rem,4vw,2.8rem)}
.sec-head p{color:var(--muted);max-width:58ch;margin-top:8px;font-size:1.05rem}
.page-h{font-size:clamp(2.4rem,5vw,3.4rem)}

.moments{display:flex;gap:22px;overflow-x:auto;padding:14px 6px 26px;scroll-snap-type:x mandatory}
.moments .pol{position:relative;flex:none;width:170px;padding:9px 9px 30px;scroll-snap-align:start}
.moments .pol:nth-child(odd){transform:rotate(-2.5deg)}
.moments .pol:nth-child(even){transform:rotate(2deg)}
.moments .pol .ph{font-size:2rem}
.moments .addtile{flex:none;width:150px;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;align-content:center;gap:6px;color:var(--muted);font-weight:600;cursor:pointer;background:transparent}
.moments .addtile svg{width:28px;height:28px}

.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.qcard{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:28px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease),border-color .2s}
.qcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.qcard .qe{font-size:2.8rem;line-height:1}
.qcard h3{font-size:1.65rem}
.qcard p{color:var(--muted);margin-top:6px}
.qcard.feat{grid-column:1/-1;flex-direction:row;align-items:center;gap:28px;padding:32px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.qcard.feat p{color:inherit;opacity:.85}
.qcard.feat .qe{font-size:4.4rem}
.qcard.feat h3{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.qcard .qbody{flex:1}
.tag{align-self:flex-start;font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--accent-ink);color:var(--accent);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--accent)}
.feat .chip{background:rgba(255,255,255,.2);color:inherit}

.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}
.ltile{position:relative;overflow:hidden;aspect-ratio:3/4;padding:18px 16px;border-radius:6px;display:flex;flex-direction:column;gap:10px;text-decoration:none;box-shadow:0 16px 32px -18px rgb(var(--shadow) / .5),0 1px 4px rgb(var(--shadow) / .12);transition:transform .25s var(--ease)}
.ltile:hover{transform:translateY(-5px) rotate(-1.2deg)}
.ltile .le{font-size:1.7rem}
.ltile b{font-family:Gloock,Georgia,serif;font-weight:400;font-size:1.3rem;line-height:1.15}
.ltile .ls{font-family:Caveat,cursive;font-size:1.15rem;line-height:1.25;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}