/* How We Become — Scrapbook Engine styles
   Scoped under .hwb-scrapbook so it never collides with Elementor/theme CSS. */

.hwb-scrapbook{
  --hwb-cream:#F0E8D2;
  --hwb-rust:#9E2B25;
  --hwb-ink:#211D1A;
  --hwb-paper:#FBF7EC;
  position:relative;
  /*width:min(92vw,640px);*/
  margin:0 auto;
}

/* ---------- stage ---------- */
.hwb-scrapbook .hwb-stage{
  position:relative;
  width:100%;
  height: auto;
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
}

.hwb-scrapbook .hwb-artifact{
  position:absolute; border:0; padding:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:rotate(var(--rot));
  transition:filter .25s ease;
  will-change:transform;
}
.hwb-scrapbook .hwb-artifact:focus-visible{
  outline:3px solid var(--hwb-cream); outline-offset:4px; border-radius:2px;
}
.hwb-scrapbook .hwb-artifact img{
  display:block; width:100%; height:auto; pointer-events:none;
}
.hwb-scrapbook .hwb-frame-photo img{
  border:7px solid #fdfbf4; box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.hwb-scrapbook .hwb-frame-polaroid img{
  border:9px solid #fdfbf4; border-bottom-width:34px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.hwb-scrapbook .hwb-frame-none img{
  box-shadow:0 6px 18px rgba(0,0,0,.45); border-radius:1px;
}
.hwb-scrapbook .hwb-artifact:hover{filter:brightness(1.06);}
.hwb-scrapbook .hwb-stage.hwb-dimmed .hwb-artifact:not(.hwb-lifted){
  filter:brightness(.45) saturate(.7);
}
.hwb-scrapbook .hwb-artifact.hwb-lifted{z-index:60 !important;}

/* ---------- replay ---------- */
.hwb-scrapbook .hwb-replay{
  margin:.9rem auto 2rem; display:block;
  border:1px solid rgba(33,29,26,.35); color:inherit; background:transparent;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:3px; cursor:pointer;
}
.hwb-scrapbook .hwb-replay:hover{background:rgba(33,29,26,.08);}

/* ---------- story panel ---------- */
.hwb-scrapbook .hwb-panel{
  position:fixed; z-index:99990; background:var(--hwb-paper); color:var(--hwb-ink);
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:.9rem;
  padding:2.1rem 1.8rem 1.6rem;
  right:0; top:0; height:100vh; width:min(420px,92vw);
  transform:translateX(102%);
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
  overflow-y:auto;
}

.hwb-story-header {
    width: 90%;
    margin: 2em auto;
}

.hwb-story-era {
    margin-bottom: 0;
    font-family: 'Geist', sans-serif;
    font-weight:600;
    font-size: 15px;
    color: #9E2B25;
}

.hwb-story-title {
  font-size:4rem;
  line-height: 1.2;
}

.hwb-story-intro {
    font-family: "Literata";
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 2.1rem;
}

.hwb-scrapbook .hwb-panel.hwb-open{transform:none;}

.hwb-scrapbook .hwb-panel-art{display:flex; justify-content:center; padding:.3rem 0 .4rem;}
.hwb-scrapbook .hwb-panel-art img{
  display:block; max-width:64%; max-height:170px; width:auto; height:auto;
  transform:rotate(-2.5deg);
}
.hwb-scrapbook .hwb-panel-art.hwb-frame-photo img{border:6px solid #fdfbf4; box-shadow:0 5px 16px rgba(0,0,0,.3);}
.hwb-scrapbook .hwb-panel-art.hwb-frame-polaroid img{border:8px solid #fdfbf4; border-bottom-width:26px; box-shadow:0 5px 16px rgba(0,0,0,.3);}
.hwb-scrapbook .hwb-panel-art.hwb-frame-none img{box-shadow:0 5px 16px rgba(0,0,0,.3); border-radius:1px;}

.hwb-scrapbook .hwb-kicker{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hwb-rust); font-weight:600;
}
.hwb-scrapbook .hwb-title{
  font-size:1.7rem; line-height:1.15; margin:0;
}
.hwb-scrapbook .hwb-body{font-size:.95rem; line-height:1.55;}
.hwb-scrapbook .hwb-quote{
  font-style:italic; font-size:1.05rem; line-height:1.5;
  border-left:3px solid var(--hwb-rust); padding-left:.9rem; margin:0; color:#4a4138;
}
.hwb-scrapbook .hwb-quote:empty{display:none;}

.hwb-scrapbook .hwb-media{margin-top:auto;}
.hwb-scrapbook .hwb-media audio{width:100%; display:block;}
.hwb-scrapbook .hwb-media .hwb-video{
  position:relative; width:100%; aspect-ratio:16/9; margin-top:.6rem;
}
.hwb-scrapbook .hwb-media .hwb-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.hwb-scrapbook .hwb-close{
  position:absolute; top:.8rem; right:.9rem; border:0; background:none; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--hwb-ink); opacity:.6; padding:.3rem;
}
.hwb-scrapbook .hwb-close:hover{opacity:1;}

/* ---------- mobile: bottom sheet ---------- */
@media (max-width:640px){
  .hwb-scrapbook .hwb-panel{
    top:auto; bottom:0; right:0; left:0; width:100%; height:auto; max-height:78vh;
    transform:translateY(104%);
    border-radius:14px 14px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.5);
  }
  .hwb-scrapbook .hwb-panel.hwb-open{transform:none;}
  .hwb-scrapbook .hwb-panel-art img{max-height:120px; max-width:52%;}
}

@media (prefers-reduced-motion:reduce){
  .hwb-scrapbook .hwb-panel{transition:none;}
}