/* Base reset + tokens */
:root{ --bg:#ffffff; --ink:#111111; --ivory:#F6EFF2; --burgundy:#2D0014; --burgundy-2:#6A414E; --rose:#DFB4C0; --radius:16px; --space:clamp(16px,2vw,24px); }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}
.unstyled{text-decoration:none}
.topbar .brand a{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;text-decoration:none}
.display{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.2rem,5vw,4rem)}
.subtitle{opacity:.85}
.card{background:#fff;border-radius:var(--radius);padding:calc(var(--space)*1.1);box-shadow:0 2px 16px rgba(0,0,0,.06)}
.ratio{position:relative;padding-top:133%}
.ratio .ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--ivory),#fff)}
.footer{border-top:1px solid #eee}
/* Sticky header */
.topbar{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #eee}
.topbar .nav .w3-button{border-radius:999px}
.topbar .brand-link{display:inline-block;padding:.25rem .5rem}
/* Brand logo image in header */
.brand-logo{height:40px;width:auto;display:inline-block;vertical-align:middle;object-fit:contain}
@media (max-width:600px){.brand-logo{height:32px}}
/* Hero logo image on homepage */
.hero .hero-logo{width:clamp(160px,32vw,360px);height:auto;display:block;margin-inline:auto}
.hero{padding-top:32px !important;padding-bottom:32px !important}
@media (max-width:600px){.hero{padding-top:24px !important;padding-bottom:24px !important}}
.hero .subtitle:last-child{margin-bottom:0}
/* A11y helper */
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Home page sections */
.home-sections{max-width:1200px;margin-inline:auto}
.home-section{background:#fff;border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.06);padding:clamp(16px,2vw,24px);display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;transition:box-shadow .25s ease, transform .25s ease}
.home-section + .home-section{margin-top:24px}
.home-section:hover{box-shadow:0 12px 36px rgba(0,0,0,.12);transform:translateY(-2px)}
.home-section .home-media img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
@media (max-width: 900px){.home-section{grid-template-columns:1fr}}

/* Reveal on scroll */
.reveal-up{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .75s cubic-bezier(.2,.65,.3,1), transform .75s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0s);will-change:transform,opacity}
.reveal-up.is-visible{opacity:1;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){.reveal-up{opacity:1;transform:none;transition:none}}

/* Two-column helper for detail pages */
.ml-two-col{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}
@media (max-width: 768px){
  .ml-two-col{grid-template-columns:1fr;gap:16px}
  .ml-two-col .collection-desc{max-width:100%}
}

/* Detail page utilities */
.detail-section{max-width:1200px;margin-inline:auto}
.detail-cover{width:100%;height:auto;border-radius:12px;display:block}
.collection-desc{max-width:520px}
/* Collection page specific: widen right description column */
.collection-cover-row{grid-template-columns:3fr 2fr}
.collection-cover-row .collection-desc{max-width:none}
.gallery-img{width:100%;height:auto;display:block;border-radius:8px}
.zoom-hidden{position:absolute;width:0;height:0;opacity:0;pointer-events:none;display:none}
.card-clip{overflow:hidden}
.card-white{background:#fff}
.like-badge{position:absolute;right:8px;top:8px;bottom:auto;background:rgba(255,255,255,.9);border-radius:999px;display:inline-flex;gap:6px;align-items:center;padding:6px 10px;font-size:.9rem;line-height:1;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;user-select:none}
.like-badge .like-btn{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.like-badge .heart{color:#888; transition: transform .15s ease, color .2s ease}
.like-badge.is-active .heart{color:var(--burgundy)}
.like-badge .count{min-width:1em;text-align:center}
.like-badge .count:empty{display:none}
.like-badge:hover .heart{transform: scale(1.1)}
@keyframes like-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.like-badge.pop .heart{animation: like-pop .25s ease}
.ml-lightbox .like-badge{top:16px;bottom:auto;right:140px}
@media (max-width: 700px){.ml-lightbox .like-badge{right:112px}}
.section-intro{color:#555;margin:0 0 12px 0;font-size:1rem;line-height:1.6;white-space:nowrap}
@media (max-width: 900px){.section-intro{white-space:normal}}
.m-0{margin:0}
.mb-8{margin-bottom:8px}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
@media (max-width:640px){.thumb-grid{gap:16px}}
.two-col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width: 900px){.two-col-grid{grid-template-columns:1fr}}