/* ===== Tokens ===== */
:root{
  --paper: #F4EEE0;
  --paper-2: #EAE1CC;
  --ink: #2B2318;
  --ink-dim: rgba(43,35,24,0.68);
  --rust: #C4633B;
  --rust-dark: #8C4126;
  --cream: #FFFBF2;
  --bone: #FBF6EA;

  --display: "Fraunces", Georgia, serif;
  --body: "Lora", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ===== Floating minimal controls ===== */
.floaty{
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 400;
  display:flex; gap: 0.6rem;
}
.floaty__pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-weight:700; font-size: 0.78rem;
  padding: 0.55rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(43,35,24,0.35);
  transition: transform 0.2s ease;
}
.floaty__pill:hover{ transform: translateY(-2px); }
.floaty__pill--buy{ background: var(--rust); color: var(--cream); }
.floaty__pill--x{ background: var(--ink); color: var(--cream); width: 2.2rem; height: 2.2rem; padding:0; }
.icon-x{ width: 0.9rem; height: 0.9rem; }

/* ===== Story flow ===== */
.story{ max-width: 720px; margin: 0 auto; }

.panel{ position:relative; }

.panel--open{
  min-height: 42svh;
  display:flex; align-items:flex-end; justify-content:center;
  padding: 2rem 1.2rem 3rem;
  text-align:center;
}
.kicker{
  font-family: var(--mono); text-transform:uppercase; letter-spacing:0.14em;
  font-size: 0.78rem; color: var(--rust-dark);
}

.panel--page{
  display:flex; flex-direction:column; align-items:center;
  padding: 2.5rem 1.5rem 4rem;
  text-align:center;
}
.panel__img{
  width: min(78%, 340px);
  margin-bottom: 1.6rem;
  filter: drop-shadow(0 18px 26px rgba(43,35,24,0.18));
}
.panel__img--sniff{ width: min(60%, 260px); }
.panel__img--framed{
  width: min(60%, 260px); border-radius: 18px;
  filter: drop-shadow(0 14px 22px rgba(43,35,24,0.22));
}
.panel__caption{
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink); max-width: 32ch; margin:0;
}
.panel__caption--big{
  font-style: normal; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.fade-in{ opacity:0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.fade-in.is-visible{ opacity:1; transform: translateY(0); }

/* alternating paper tone for rhythm */
.panel--page:nth-of-type(even){ background: var(--paper-2); }

/* ===== Full-bleed cinematic panels ===== */
.panel--full{
  min-height: 100svh; width: 100vw; margin-left: calc(50% - 50vw);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.panel__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.panel__reveal, .panel__closing{
  position:relative; z-index:1; text-align:center;
  padding: 3rem 1.5rem 4rem; max-width: 620px;
}
.wordmark{
  display:block; font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(2.8rem, 8vw, 5rem); color: var(--cream);
  text-shadow: 0 8px 30px rgba(0,0,0,0.55);
  margin-bottom: 0.8rem;
}
.panel__caption--light{ color: var(--bone); text-shadow: 0 4px 18px rgba(0,0,0,0.6); }

.panel--close .panel__closing{ padding-bottom: 4.5rem; }
.panel__cta{ display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; margin: 1.6rem 0 1.2rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family: var(--mono); font-weight:700; font-size:0.92rem;
  padding: 0.9rem 1.8rem; border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--buy{ background: var(--rust); color: var(--cream); box-shadow: 0 10px 26px -8px rgba(196,99,59,0.7); }
.btn--x{ background: var(--cream); color: var(--ink); }
.panel__foot{ font-family: var(--mono); font-size: 0.72rem; color: var(--bone); opacity:0.85; }

@media (max-width: 640px){
  .panel--open{ min-height: 34svh; }
  .panel--page{ padding: 2rem 1.2rem 3rem; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .floaty__pill{ transition:none !important; }
}