/* ============================================================
   in-Between Co — The Festive Edit 2026 · Online Brochure viewer
   A shareable link that opens the real brochure pages in the
   browser — flip through, no download needed.
   ============================================================ */

:root {
  --cream:      #F1E5CE;
  --cream-soft: rgba(241,229,206,.72);
  --cream-faint:rgba(241,229,206,.45);
  --saffron:    #C57832;
  --saffron-deep:#AA6222;
  --wa:         #25D366;
  --backdrop:   #201b17;
  --backdrop-2: #2b241e;
  --panel:      rgba(24,20,16,.72);
  --line:       rgba(241,229,206,.16);
  --ease: cubic-bezier(.4,.14,.16,1);
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --page-w: 880px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--cream);
  background: var(--backdrop);
  background-image: radial-gradient(120% 80% at 50% -8%, var(--backdrop-2) 0%, var(--backdrop) 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }

/* Top progress bar */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 90;
  background: linear-gradient(90deg, var(--saffron), var(--saffron-deep)); transition: width .12s linear; }

/* ===================== Top bar ===================== */
.bar {
  position: static; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px clamp(14px, 3vw, 26px);
  background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar__brand img { height: 24px; width: auto; }
.bar__title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bar__title b { font-size: .82rem; font-weight: 700; letter-spacing: .01em; color: var(--cream); white-space: nowrap; }
.bar__title span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--saffron); font-weight: 600; }
/* The top bar shows only the brand on every screen; the page counter, PDF
   and WhatsApp are intentionally not in the bar. WhatsApp stays reachable via
   the brochure's contact page, the end-of-brochure CTA, and (on phones) the
   floating button; PDF stays in the end card. */
.bar__right { display: none; }

.counter { font-size: .72rem; letter-spacing: .14em; font-weight: 600; color: var(--cream-soft);
  font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.counter b { color: var(--cream); }

.iconbtn {
  display: inline-flex; align-items: center; gap: .55em;
  height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--cream-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.iconbtn svg { width: 15px; height: 15px; }
.iconbtn:hover { color: var(--cream); border-color: var(--cream-faint); }
.iconbtn--wa { background: var(--wa); color: #06331b; border-color: transparent; }
.iconbtn--wa:hover { background: #1fc25c; color: #06331b; }
.iconbtn--wa svg { width: 16px; height: 16px; }

/* ===================== Reader ===================== */
.reader {
  max-width: calc(var(--page-w) + 80px);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(22px, 4vw, 36px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3vw, 34px);
  scroll-snap-type: y proximity;
}
.page {
  width: 100%; max-width: var(--page-w);
  scroll-snap-align: center; scroll-margin-top: 16px;
  border-radius: 3px; overflow: hidden;
  background: #efe6d3;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 22px 50px rgba(0,0,0,.42);
  cursor: zoom-in;
  transition: transform .5s var(--ease), opacity .5s var(--ease), box-shadow .3s var(--ease);
}
.page img { width: 100%; height: auto; }
.page:hover { box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 26px 60px rgba(0,0,0,.5); }
html.js .page { opacity: 0; transform: translateY(22px); }
html.js .page.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .page { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Side nav arrows (desktop) */
.arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 70;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s var(--ease), border-color .25s var(--ease), opacity .3s var(--ease);
}
.arrow:hover { background: rgba(40,33,26,.9); border-color: var(--cream-faint); }
.arrow svg { width: 20px; height: 20px; }
.arrow--prev { left: clamp(10px, 3vw, 30px); }
.arrow--next { right: clamp(10px, 3vw, 30px); }
.arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 1040px) { .arrow { display: none; } }

/* ===================== Contact footer ===================== */
.foot {
  max-width: var(--page-w); margin: 0 auto;
  padding: clamp(30px,5vw,52px) clamp(20px,4vw,40px) clamp(52px,9vw,88px);
  text-align: center;
}
.foot__k { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ochre); font-weight: 600; }
.foot__phone { display: inline-block; margin-top: 8px; font-size: clamp(1.7rem,5vw,2.4rem); font-weight: 700; color: var(--cream); letter-spacing: -.01em; transition: color .25s var(--ease); }
.foot__phone:hover { color: var(--saffron); }
.foot__links { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .82rem; color: var(--cream-soft); letter-spacing: .02em; }
.foot__links a { transition: color .25s var(--ease); }
.foot__links a:hover { color: var(--saffron); }
.foot__sep { color: var(--saffron); }
.foot__fine { margin-top: 16px; font-size: .72rem; color: var(--cream-faint); letter-spacing: .04em; }

/* ===================== Lightbox ===================== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(16,13,10,.94);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow: auto; overscroll-behavior: contain;
  touch-action: pinch-zoom;
  padding: 0; text-align: center;
}
.lightbox.open { display: block; }
.lightbox img {
  margin: auto; max-width: 100%; height: auto;
  min-height: 100%;
}
.lightbox.fit img { max-width: min(96vw, 1600px); }
.lightbox.zoom { touch-action: auto; }
.lightbox.zoom img { max-width: none; width: 1600px; cursor: zoom-out; }
.lightbox__close {
  position: fixed; top: 14px; right: 16px; z-index: 101;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__hint {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 101;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-faint);
  background: var(--panel); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 620px) { .lightbox__hint { display: none; } }

/* Floating WhatsApp (mobile) */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 75;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wa); color: #06331b; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.wa-float svg { width: 27px; height: 27px; }
/* Phones additionally get the floating WhatsApp button. */
@media (max-width: 620px) {
  .wa-float { display: flex; }
}
@media (max-width: 420px) { .bar__title span { display: none; } }