@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --cream:#FAF6EA; --cream-2:#F2E8D2; --olive:#5C6B33; --olive-2:#3E4A21;
  --brown:#6B4A2B; --brown-2:#43301E; --gold:#A98B4A; --gold-soft:#DFCFA6;
  --ink:#FBF7EC;
  --serif:'Cormorant Garamond',ui-serif,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --pad:clamp(14px,4.5vw,22px);
  --hdr:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
  background:var(--cream);
  color:var(--brown);
  font:400 16px/1.55 var(--sans);
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--olive);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 16px;background:var(--olive);color:var(--ink);text-decoration:none}
.skip:focus{left:0}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:2px;
  min-height:var(--hdr);
  padding:env(safe-area-inset-top) 6px 0;
  background:var(--cream);
  border-bottom:1px solid var(--gold-soft);
}
.hdr__btn{width:44px;height:44px;display:grid;place-items:center;color:var(--olive-2);border-radius:50%}
.hdr__btn:active{background:var(--cream-2)}
.hdr__btn--off{visibility:hidden}
.hdr__brand{
  flex:1;text-align:center;text-decoration:none;
  font:600 20px/1 var(--serif);letter-spacing:.07em;color:var(--olive-2);
  white-space:nowrap;
}

/* ---------- home hero ---------- */
.main{padding:0 var(--pad)}
.hero{position:relative;padding:26px 0 20px;text-align:center}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(var(--gold) .7px,transparent .8px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);
  mask-image:radial-gradient(closest-side,#000,transparent);
}
.hero__overline{margin:0;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown-2)}
.hero__title{margin:12px 0 0;font:600 clamp(38px,12vw,54px)/1 var(--serif);letter-spacing:.02em;color:var(--olive)}
.hero__tag{margin:8px 0 0;font:italic 400 15px/1.4 var(--serif);color:var(--brown)}
.hero::after{content:'';display:block;width:64px;height:1px;background:var(--gold);margin:20px auto 0}
.hero[hidden]{display:none}

.view-head{padding:20px 0 14px;text-align:center}
.view-head h1{margin:0;font:600 clamp(28px,8vw,36px)/1.1 var(--serif);color:var(--olive)}
.view-head p{margin:8px 0 0;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- grid + tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--pad) * .8);padding-bottom:6px}
.tile{
  position:relative;display:block;padding:5px;
  background:#fff;border:1px solid var(--gold-soft);border-radius:2px;
  box-shadow:0 1px 2px rgba(67,48,30,.07);
  text-decoration:none;
  transition:transform .16s var(--ease),border-color .16s linear;
}
.tile:active{transform:scale(.985)}
@media (hover:hover){.tile:hover{border-color:var(--gold)}}
.tile__img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--cream-2)}
.tile__label{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
  max-width:92%;padding:5px 10px;border-radius:2px;
  background:var(--olive);color:var(--ink);
  font:600 10px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
.tile__blank{
  aspect-ratio:3/4;display:grid;place-items:center;background:var(--cream-2);
  background-image:radial-gradient(var(--gold) .8px,transparent .9px);background-size:12px 12px;
}
.tile__blank span{font:600 26px/1 var(--serif);color:var(--olive);opacity:.5}

.skel{
  aspect-ratio:3/4;border-radius:2px;
  background:linear-gradient(100deg,var(--cream-2) 30%,#F8F1DE 50%,var(--cream-2) 70%);
  background-size:200% 100%;animation:sh 1.2s linear infinite;
}
@keyframes sh{to{background-position:-200% 0}}

.empty,.notice{
  grid-column:1/-1;margin:0;padding:26px 18px;text-align:center;
  border:1px solid var(--gold-soft);border-radius:2px;background:#fff;font-size:15px;
}
.notice{margin:18px 0}

/* ---------- footer ---------- */
.ftr{margin-top:24px;padding:28px var(--pad);text-align:center;border-top:1px solid var(--gold-soft)}
.ftr__brand{margin:0;font:600 24px/1 var(--serif);letter-spacing:.05em;color:var(--olive)}
.ftr__over{margin:8px 0 0;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.ftr__link{margin:16px 0 0;font:600 16px/1 var(--sans)}
.ftr__link a{text-decoration:none;border-bottom:1px solid var(--gold)}
.ftr__note{margin:18px 0 0;font-size:11px;color:#8A7558}

/* ---------- whatsapp ---------- */
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--olive);color:var(--ink);text-decoration:none;
  font:600 15px/1 var(--sans);
}
.btn-wa:active{background:var(--olive-2)}
.btn-wa--full{width:100%;margin-top:14px}
.fab{
  position:fixed;z-index:25;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:var(--olive);color:var(--ink);text-decoration:none;
  box-shadow:0 6px 18px rgba(62,74,33,.34);
}
.fab:active{background:var(--olive-2)}
body.is-locked .fab{visibility:hidden}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(43,31,18,.45)}
.scrim[hidden]{display:none}
.drawer{
  position:fixed;top:0;right:0;z-index:50;
  width:min(80vw,320px);height:100%;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(18px + env(safe-area-inset-bottom));
  background:var(--cream);border-left:1px solid var(--gold-soft);
  transform:translateX(101%);
  transition:transform .26s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer__hd{margin:0;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.drawer__list{flex:1;list-style:none;margin:12px 0 0;padding:0}
.drawer__list a{
  display:block;padding:15px 0;border-bottom:1px solid var(--gold-soft);
  font:600 21px/1.2 var(--serif);color:var(--brown-2);text-decoration:none;
}
.drawer__list a[aria-current="true"]{color:var(--olive)}
.drawer__list a[aria-current="true"]::before{content:'\25C6';font-size:8px;vertical-align:3px;margin-right:9px;color:var(--gold)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(30,23,14,.95)}
.lb[hidden]{display:none}
.lb__stage{position:relative;display:grid;place-items:center}
.lb__img{
  max-width:92vw;max-height:80vh;width:auto;height:auto;
  object-fit:contain;background:var(--cream-2);
  transition:opacity .18s linear;
}
.lb__stage[data-loading] .lb__img{opacity:.2}
.lb__spin{
  position:absolute;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(250,246,234,.25);border-top-color:var(--ink);
  animation:spin .8s linear infinite;opacity:0;transition:opacity .15s linear;
}
.lb__stage[data-loading] .lb__spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.lb__btn{position:absolute;z-index:2;width:46px;height:46px;display:grid;place-items:center;color:var(--ink);border-radius:50%;background:rgba(0,0,0,.28)}
.lb__btn:active{background:rgba(0,0,0,.5)}
.lb__x{top:calc(env(safe-area-inset-top) + 10px);right:12px;background:none}
.lb__prev{left:6px;top:50%;transform:translateY(-50%)}
.lb__next{right:6px;top:50%;transform:translateY(-50%)}
.lb--single .lb__nav{display:none}
.lb__count{
  position:absolute;left:0;right:0;margin:0;text-align:center;
  bottom:calc(env(safe-area-inset-bottom) + 18px);
  font:600 13px/1 var(--sans);letter-spacing:.1em;color:rgba(251,247,236,.75);
}

/* ---------- wider screens ---------- */
@media (min-width:620px){
  .hdr,.main,.ftr{padding-left:max(var(--pad),calc((100vw - 1000px) / 2));padding-right:max(var(--pad),calc((100vw - 1000px) / 2))}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:980px){
  .grid{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}