/*!
 * How It Began (artwerkx) - frontend styles
 * Ported 1:1 from the client prototype "how-it-began-v3.html".
 * Every class is prefixed with "hib-" and scoped under ".hib-root" so nothing
 * leaks into the theme and nothing from the theme leaks in.
 */

.hib-root{
  --hib-cream:#f7f2ea;
  --hib-gold:#7A6820;
  --hib-gold-pale:#c8b87a;
  --hib-ink3:#8a7560;
  --hib-ink4:#b8a48c;
  --hib-serif:'Cormorant Garamond',Georgia,serif;
  --hib-sans:'Jost',system-ui,sans-serif;
  --hib-pad:clamp(0.7rem,3vw,2rem);

  position:relative;
  height:var(--hib-height,88vh);
  min-height:var(--hib-min-height,560px);
  max-height:var(--hib-max-height,none);
  background:radial-gradient(120% 120% at 50% 0%, #efe6d6 0%, #e4d8c4 60%, #d9ccb4 100%);
  font-family:var(--hib-sans);
  color:var(--hib-cream);
  line-height:normal;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--hib-pad);
  padding-bottom:calc(var(--hib-pad) + 34px);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.hib-root *,.hib-root *::before,.hib-root *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.hib-root p,.hib-root h1,.hib-root h2,.hib-root h3,.hib-root h4,
.hib-root blockquote,.hib-root figure,.hib-root figcaption,.hib-root ul,.hib-root li{margin:0;padding:0;border:0;}
/* themes often give blockquote a left rule and quote marks; both must go */
.hib-root blockquote{background:none;quotes:none;font-style:inherit;}
.hib-root blockquote::before,.hib-root blockquote::after,
.hib-root blockquote p::before,.hib-root blockquote p::after{content:none;display:none;}
.hib-root img{max-width:none;}
.hib-root button{font:inherit;color:inherit;background:none;border:0;padding:0;}
.hib-root :focus-visible{outline:2px solid var(--hib-gold-pale);outline-offset:2px;}

/* ---------------- stage + book shell ---------------- */
.hib-stage{position:relative;}
.hib-stage.hib-landscape{perspective:2800px;width:min(100%,1000px);aspect-ratio:1000/640;max-height:100%;}
.hib-stage.hib-portrait{perspective:2400px;width:min(100%,460px);height:min(100%,800px);}
.hib-book{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
.hib-book::after{content:"";position:absolute;left:0%;right:0%;bottom:-32px;height:64px;
  background:radial-gradient(56% 100% at 50% 0%, rgba(18,12,6,0.55) 0%, rgba(18,12,6,0.32) 42%, rgba(18,12,6,0) 78%);z-index:0;filter:blur(6px);}

/* leaves: shared flip, geometry by mode class */
.hib-leaf{position:absolute;top:0;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:left center;
  transition:transform .82s cubic-bezier(.42,.06,.2,1);}
.hib-leaf.hib-turning{will-change:transform;}
.hib-leaf.hib-pt{left:0;width:100%;}
.hib-leaf.hib-ls{left:50%;width:50%;}
.hib-baseL{position:absolute;left:0;top:0;width:50%;height:100%;border-radius:8px 2px 2px 8px;overflow:hidden;box-shadow:0 10px 26px rgba(28,20,10,0.34), 0 30px 64px rgba(28,20,10,0.30);}
.hib-spine{position:absolute;left:50%;top:0;width:40px;height:100%;transform:translateX(-50%);z-index:30;pointer-events:none;opacity:0;transition:opacity .4s ease .3s;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.26) 50%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0) 100%);}
.hib-opened .hib-spine{opacity:1;}

.hib-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#1a1812;box-shadow:0 10px 26px rgba(28,20,10,0.34), 0 30px 64px rgba(28,20,10,0.30);}
.hib-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;}
.hib-leaf.hib-ls .hib-face{border-radius:2px 8px 8px 2px;}
.hib-leaf.hib-ls .hib-face.hib-back{transform:rotateY(180deg);border-radius:8px 2px 2px 8px;}
.hib-leaf.hib-pt .hib-face{border-radius:4px 10px 10px 4px;}
.hib-leaf.hib-pt .hib-face.hib-back{transform:rotateY(180deg);background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0) 20%), #241c12;}
.hib-curl{position:absolute;inset:0;pointer-events:none;z-index:7;
  background:linear-gradient(105deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 16%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.40) 100%);
  opacity:0;transition:opacity .22s ease;}
.hib-leaf.hib-turning .hib-curl{opacity:1;}

.hib-page{position:absolute;inset:0;}
.hib-pic{position:absolute;inset:0;}
.hib-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(12,9,5,0.34) 0%, rgba(12,9,5,0) 20%, rgba(12,9,5,0.05) 38%, rgba(12,9,5,0.74) 80%, rgba(12,9,5,0.9) 100%);}
.hib-keyline{position:absolute;inset:11px;border:1px solid rgba(247,242,234,0.18);border-radius:4px;pointer-events:none;z-index:2;}

/* ---------------- typography ---------------- */
.hib-eyebrow{font-family:var(--hib-sans);font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--hib-gold-pale);}
.hib-lead{font-family:var(--hib-serif);font-weight:500;line-height:1.14;color:var(--hib-cream);text-shadow:0 2px 16px rgba(0,0,0,0.5);}
.hib-para{font-family:var(--hib-serif);line-height:1.52;color:rgba(247,242,234,0.93);text-shadow:0 1px 10px rgba(0,0,0,0.55);margin-bottom:0.55rem;}
.hib-para:last-child{margin-bottom:0;}
.hib-feature{font-family:var(--hib-serif);font-weight:500;font-style:normal;line-height:1.35;color:var(--hib-cream);text-shadow:0 1px 10px rgba(0,0,0,0.55);margin-top:0.9rem;}
.hib-feature em{font-style:italic;}
.hib-midtext{font-family:var(--hib-serif);font-weight:500;color:var(--hib-cream);text-align:center;line-height:1.2;text-shadow:0 2px 16px rgba(0,0,0,0.5);font-size:clamp(1.4rem,3.2vw,2rem);margin:0.6rem 0 0.2rem;}
.hib-feat-right{align-self:flex-end;text-align:right;}
.hib-rp-foot{justify-content:flex-start;}
.hib-rp-foot .hib-txt{flex:1 1 auto;width:100%;}

.hib-qctx{font-family:var(--hib-serif);font-style:italic;line-height:1.45;color:rgba(247,242,234,0.78);}
.hib-q{font-family:var(--hib-serif);font-weight:500;line-height:1.22;color:var(--hib-cream);text-shadow:0 2px 16px rgba(0,0,0,0.5);}
.hib-q.hib-accent{font-style:italic;font-weight:400;color:var(--hib-gold-pale);}
.hib-q em{font-style:italic;}

.hib-quote-wrap{display:flex;flex-direction:column;align-items:center;}
.hib-quote.hib-alignL .hib-quote-wrap{align-items:flex-start;}
.hib-root .hib-btn{display:inline-block;text-decoration:none;}
a.hib-btn:hover{color:var(--hib-cream);}
.hib-num{position:absolute;font-family:var(--hib-sans);font-size:9px;letter-spacing:0.24em;color:rgba(247,242,234,0.5);z-index:4;}

/* ---------------- chapter divider + inline chapter mark ---------------- */
.hib-chdiv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,3vw,2rem);z-index:3;}
.hib-chdiv-in{text-align:center;max-width:88%;}
.hib-chd-circ{width:clamp(120px,17vw,208px);aspect-ratio:1/1;margin:0 auto clamp(1rem,2.4vw,1.7rem);}
.hib-chd-num{font-family:var(--hib-sans);font-size:clamp(9px,1.05vw,12px);letter-spacing:0.34em;
  text-transform:uppercase;color:var(--hib-gold-pale);margin-bottom:clamp(0.8rem,2vw,1.3rem);}
.hib-chd-rule{width:clamp(38px,6vw,70px);height:1px;margin:0 auto clamp(0.9rem,2.2vw,1.4rem);
  background:linear-gradient(90deg,transparent,rgba(200,184,122,0.75),transparent);}
.hib-chd-name{font-family:var(--hib-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.1;color:var(--hib-cream);
  text-shadow:0 2px 20px rgba(0,0,0,0.55);}
.hib-chmark{text-align:center;margin:0.15rem 0 0.9rem;}
.hib-chmark .hib-chd-num{margin-bottom:0.7rem;}
.hib-chmark .hib-chd-rule{margin:0 auto 0.8rem;}
.hib-chm-name{font-family:var(--hib-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.24rem,5vw,1.6rem);line-height:1.1;color:var(--hib-cream);
  text-shadow:0 2px 18px rgba(0,0,0,0.5);}
.hib-chm-circ{width:clamp(80px,24vw,118px);aspect-ratio:1/1;margin:0 auto 0.7rem;}
/* in double (landscape) mode the chapter mark becomes its own divider page */
.hib-dbl .hib-chmark{display:none;}
/* when a page keeps its chapter mark, its own eyebrow is redundant */
.hib-has-chmark > .hib-eyebrow{display:none;}

/* ---------------- images ---------------- */
.hib-art{position:relative;overflow:hidden;background:transparent;}
.hib-art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 22px 12px var(--hib-edge,#14100a);z-index:2;}
.hib-art img{width:100%;height:100%;object-fit:cover;display:block;}
.hib-art.hib-art-s{width:64%;aspect-ratio:1/1;margin:0.6rem auto;}

.hib-wscatter{position:relative;width:100%;aspect-ratio:3/4;max-height:100%;margin:0 auto;}
.hib-wcirc{position:absolute;aspect-ratio:1/1;}
.hib-wcirc-clip{width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px solid rgba(200,184,122,0.5);box-shadow:0 12px 34px rgba(0,0,0,0.5),0 0 0 6px rgba(247,242,234,0.05);}
.hib-wcirc-clip img{width:100%;height:100%;object-fit:cover;display:block;}

.hib-art-stack{display:flex;flex-direction:column;gap:0.4rem;width:100%;align-items:center;justify-content:center;}

/* photo placeholder (optional block) */
.hib-photo{position:relative;width:100%;aspect-ratio:16/10;border-radius:3px;flex:none;
  background:repeating-linear-gradient(45deg, rgba(247,242,234,0.05) 0 8px, rgba(247,242,234,0) 8px 16px), rgba(0,0,0,0.16);
  display:flex;align-items:center;justify-content:center;}
.hib-photo .hib-plbl{font-family:var(--hib-sans);font-size:8px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(247,242,234,0.5);}

/* sketch placeholder (optional block) */
.hib-sketch{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8rem;
  border:1px solid rgba(247,242,234,0.16);border-radius:4px;
  background:repeating-linear-gradient(45deg, rgba(247,242,234,0.045) 0 6px, rgba(247,242,234,0) 6px 12px),
            repeating-linear-gradient(-45deg, rgba(247,242,234,0.04) 0 6px, rgba(247,242,234,0) 6px 12px);}
.hib-sketch .hib-sicon{width:40px;height:40px;opacity:0.55;}
.hib-sketch .hib-slbl{font-family:var(--hib-sans);font-size:8.5px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(247,242,234,0.5);}
.hib-sketch .hib-scap{font-family:var(--hib-serif);font-style:italic;font-size:clamp(0.95rem,2vw,1.15rem);color:rgba(247,242,234,0.7);text-align:center;max-width:22ch;}

/* ---------------- landscape left page (image only) ---------------- */
.hib-lp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(1.4rem,3vw,2.4rem);z-index:3;}
.hib-lp .hib-art{max-width:100%;max-height:100%;}
.hib-lp .hib-art.hib-art-l{width:100%;aspect-ratio:16/10;}
.hib-lp .hib-art.hib-art-p{height:100%;aspect-ratio:3/4;}
.hib-lp .hib-art-stack{height:100%;}
.hib-lp .hib-art-stack .hib-art.hib-art-l,
.hib-lp .hib-art-stack .hib-art.hib-art-p{flex:1 1 0;min-height:0;width:100%;aspect-ratio:auto;max-height:none;margin:0;}
.hib-lp .hib-art-stack .hib-art img{height:100%;object-fit:cover;}

/* ---------------- landscape right page (text only) ---------------- */
.hib-rp{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(0.6rem,1.6vw,1rem);padding:clamp(1.1rem,2.6vw,1.9rem);z-index:3;overflow-y:auto;}
.hib-rp::-webkit-scrollbar{display:none;}
.hib-rp.hib-quote{align-items:center;text-align:center;}
.hib-txt{display:flex;flex-direction:column;}
.hib-ls .hib-eyebrow{font-size:9px;}
.hib-ls .hib-lead{font-size:clamp(1.4rem,3.4vw,2rem);}
.hib-ls .hib-para{font-size:clamp(0.98rem,2.2vw,1.18rem);}
.hib-ls .hib-feature{font-size:clamp(1.12rem,2.5vw,1.36rem);}
.hib-ls .hib-num{bottom:clamp(0.7rem,2vw,1.1rem);right:clamp(1rem,2.4vw,1.6rem);}
.hib-ls .hib-qctx{font-size:clamp(0.9rem,2vw,1.08rem);max-width:30ch;}
.hib-ls .hib-q{font-size:clamp(1.4rem,3.2vw,2rem);max-width:20ch;}
.hib-ls .hib-q.hib-long{font-size:clamp(1.2rem,2.7vw,1.7rem);max-width:26ch;}

/* ---------------- portrait page (also used for each half in double mode) ---------------- */
.hib-pp{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(0.95rem,4.4vw,1.55rem);z-index:3;overflow-y:auto;}
.hib-pp::-webkit-scrollbar{display:none;}
.hib-pp .hib-eyebrow{margin-bottom:0.7rem;}
.hib-pp .hib-lead{font-size:clamp(1.28rem,5.5vw,1.66rem);margin-bottom:0.62rem;}
.hib-pp .hib-para{font-size:clamp(0.93rem,3.95vw,1.06rem);margin-bottom:0.58rem;}
.hib-pp .hib-feature{font-size:clamp(1.06rem,4.5vw,1.21rem);}
.hib-pp .hib-qctx{font-size:clamp(0.86rem,3.6vw,1rem);max-width:29ch;margin:0.42rem 0;}
.hib-pp .hib-q{font-size:clamp(1.36rem,5.5vw,1.82rem);max-width:20ch;}
.hib-pp .hib-q.hib-long{font-size:clamp(1.12rem,4.6vw,1.56rem);max-width:27ch;}
.hib-pp.hib-quote{align-items:center;text-align:center;}
.hib-pp .hib-num{bottom:clamp(1rem,4vw,1.6rem);right:clamp(1.2rem,5vw,1.8rem);}
.hib-pp .hib-photo{margin:0.5rem 0 0.9rem;}
.hib-pp.hib-below .hib-photo{margin:1rem 0 0;}

/* image spacing: first-in-page (image above text) vs last-in-page (image below text) */
.hib-pp .hib-art{flex:none;margin:0.3rem auto 0.92rem;}
.hib-pp.hib-below .hib-art{margin:1.05rem auto 0.35rem;}
.hib-pp .hib-art.hib-art-l{width:100%;aspect-ratio:16/9;}
.hib-pp .hib-art.hib-art-p{width:62%;aspect-ratio:3/4;}
.hib-pp .hib-wscatter{width:74%;margin:0.2rem auto 0.7rem;}
.hib-pp.hib-below .hib-wscatter{margin:0.7rem auto 0.2rem;}
.hib-pp .hib-art-stack{margin:0.5rem auto 1.35rem;}
.hib-pp.hib-below .hib-art-stack{margin:1.35rem auto 0.5rem;}
.hib-pp .hib-art-stack .hib-art.hib-art-l,
.hib-pp .hib-art-stack .hib-art.hib-art-p{width:100%;aspect-ratio:auto;max-height:none;margin:0;}
.hib-pp .hib-art-stack .hib-art img{height:auto;}

.hib-quote.hib-alignL .hib-q,.hib-quote.hib-alignL .hib-qctx{text-align:left;}
.hib-quote.hib-vcentre{display:flex;flex-direction:column;justify-content:center;}

/* ---------------- double (landscape) page tuning ---------------- */
.hib-dbl .hib-pp{padding:clamp(0.9rem,2.1vw,1.5rem);}
.hib-dbl .hib-pp .hib-lead{font-size:clamp(1.1rem,2.05vw,1.45rem);margin-bottom:0.4rem;}
.hib-dbl .hib-pp .hib-para{font-size:clamp(0.84rem,1.48vw,1rem);line-height:1.42;margin-bottom:0.4rem;}
.hib-dbl .hib-pp .hib-feature{font-size:clamp(0.96rem,1.7vw,1.15rem);}
.hib-dbl .hib-pp .hib-q{font-size:clamp(1.05rem,2vw,1.38rem);max-width:96%;}
.hib-dbl .hib-pp .hib-q.hib-long{font-size:clamp(1rem,1.9vw,1.3rem);max-width:96%;}
.hib-dbl .hib-pp .hib-qctx{font-size:clamp(0.82rem,1.4vw,0.94rem);line-height:1.42;}
.hib-dbl .hib-pp .hib-cl{margin-top:0.05rem;}
.hib-dbl .hib-pp.hib-quote{padding-top:clamp(0.7rem,1.6vw,1.1rem);padding-bottom:clamp(0.7rem,1.6vw,1.1rem);}
.hib-dbl .hib-pp .hib-cl .hib-btn{font-size:9px;padding:0.5rem 0.9rem;}
.hib-dbl .hib-pp .hib-cl .hib-tag{font-size:7.5px;margin-top:0.5rem;}
.hib-dbl .hib-pp .hib-eyebrow{margin-bottom:0.5rem;}
.hib-dbl .hib-rp .hib-para{font-size:clamp(0.84rem,1.48vw,1rem);line-height:1.42;margin-bottom:0.4rem;}
.hib-dbl .hib-rp .hib-lead{font-size:clamp(1.1rem,2.05vw,1.45rem);}
.hib-dbl .hib-rp .hib-feature{font-size:clamp(0.96rem,1.7vw,1.15rem);}
.hib-dbl .hib-rp .hib-q{font-size:clamp(1.05rem,2vw,1.38rem);}
.hib-dbl .hib-rp .hib-q.hib-long{font-size:clamp(1rem,1.9vw,1.3rem);}
.hib-dbl .hib-pp .hib-art{margin:0.3rem auto clamp(1rem,2.1vw,1.5rem);}
.hib-dbl .hib-pp.hib-below .hib-art{margin:clamp(1rem,2.1vw,1.5rem) auto 0.2rem;}
.hib-dbl .hib-pp .hib-art.hib-art-l{aspect-ratio:16/9;width:100%;}
.hib-dbl .hib-pp .hib-art.hib-art-p{width:56%;}
.hib-dbl .hib-pp .hib-art.hib-art-s{width:68%;}
.hib-dbl .hib-pp .hib-wscatter{aspect-ratio:1/1.03;width:84%;margin:0.1rem auto clamp(0.8rem,1.7vw,1.1rem);}
@media (max-height:780px){
  .hib-dbl .hib-pp{padding:clamp(0.75rem,1.8vw,1.15rem);}
  .hib-dbl .hib-pp .hib-art.hib-art-l{aspect-ratio:2.05/1;}
  .hib-dbl .hib-pp .hib-lead{font-size:clamp(1rem,1.85vw,1.24rem);}
  .hib-dbl .hib-pp .hib-para{font-size:clamp(0.8rem,1.35vw,0.92rem);line-height:1.4;margin-bottom:0.34rem;}
  .hib-dbl .hib-pp .hib-art{margin:0.25rem auto 0.85rem;}
  .hib-dbl .hib-pp .hib-wscatter{width:72%;margin:0.1rem auto 0.6rem;}
}

/* ---------------- closing block ---------------- */
.hib-cl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(1.4rem,4vw,2.2rem);z-index:3;}
.hib-cl.hib-cl-merge{position:static;inset:auto;padding:0;margin-top:1.7rem;z-index:auto;}
.hib-cl .hib-end{font-family:var(--hib-sans);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--hib-gold-pale);margin-bottom:0.9rem;}
.hib-cl .hib-close{margin-bottom:1.3rem;}
.hib-btns{display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center;}
.hib-root .hib-btn{cursor:pointer;font-family:var(--hib-sans);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:0.65rem 1rem;border-radius:26px;border:1px solid var(--hib-gold-pale);color:var(--hib-cream);background:rgba(122,104,32,0.4);}
.hib-btns-ask{display:flex;justify-content:center;margin-top:0.7rem;}
.hib-root .hib-btn-ask{display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;transition:background 0.18s,border-color 0.18s;}
.hib-root .hib-btn-ask:hover{background:rgba(122,104,32,0.6);border-color:var(--hib-cream);}
.hib-ask-ico{width:22px;height:22px;border-radius:50%;flex:none;}
.hib-cl .hib-tag{margin-top:1.2rem;font-family:var(--hib-sans);font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(247,242,234,0.6);}

/* ---------------- navigation ---------------- */
.hib-tapzone{position:absolute;top:0;bottom:0;width:22%;z-index:11000;cursor:pointer;}
.hib-tapzone.hib-left{left:0;}
.hib-tapzone.hib-right{right:0;}
.hib-root .hib-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:12000;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(247,242,234,0.45);background:rgba(20,16,10,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .3s ease, transform .2s ease;}
.hib-arrow svg{width:15px;height:15px;stroke:var(--hib-cream);fill:none;stroke-width:1.7;}
.hib-arrow.hib-prev{left:-12px;}
.hib-arrow.hib-next{right:-12px;}
.hib-arrow:active{transform:translateY(-50%) scale(0.92);}
.hib-arrow.hib-hidden{opacity:0;pointer-events:none;}

.hib-counter{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-family:var(--hib-sans);font-size:10px;letter-spacing:0.28em;color:var(--hib-ink3);}
.hib-hint{position:absolute;bottom:-30px;left:0;right:0;width:100%;padding:0 4px;display:flex;justify-content:center;gap:1rem;font-family:var(--hib-sans);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--hib-ink3);opacity:0.85;z-index:70;}
.hib-hint.hib-split{justify-content:space-between;}
.hib-hint span{white-space:nowrap;}
@media (max-width:560px){.hib-hint{font-size:7.5px;letter-spacing:0.1em;padding:0 6px;}}

/* phone: both controls sit bottom-left, clear of the text and of the site's floating buttons */
.hib-stage.hib-portrait .hib-arrow{top:auto;bottom:8px;transform:none;width:33px;height:33px;background:rgba(20,16,10,0.62);border-color:rgba(247,242,234,0.48);}
.hib-stage.hib-portrait .hib-arrow.hib-prev{left:22%;right:auto;}
.hib-stage.hib-portrait .hib-arrow.hib-next{left:52%;right:auto;}
.hib-stage.hib-portrait .hib-arrow:active{transform:scale(0.9);}
.hib-stage.hib-portrait .hib-arrow svg{width:14px;height:14px;}
.hib-stage.hib-portrait .hib-pp{padding-bottom:2.5rem;}
.hib-stage.hib-portrait .hib-num{bottom:1rem;}
.hib-stage.hib-portrait .hib-tapzone{width:26%;bottom:50px;}

@media (max-width:380px),(max-height:645px){
  .hib-pp{padding:0.85rem 0.95rem;}
  .hib-pp .hib-lead{font-size:1.14rem;margin-bottom:0.5rem;}
  .hib-pp .hib-para{font-size:0.88rem;line-height:1.45;margin-bottom:0.46rem;}
  .hib-pp .hib-feature{font-size:0.98rem;margin-top:0.4rem;}
  .hib-pp .hib-art{margin:0.3rem auto 0.8rem;}
  .hib-pp.hib-below .hib-art{margin:0.8rem auto 0.3rem;}
  .hib-pp .hib-wscatter{width:72%;margin:0.2rem auto 0.65rem;}
  .hib-chmark{margin:0.1rem 0 0.7rem;}
  .hib-chm-circ{width:74px;margin:0 auto 0.55rem;}
  .hib-chm-name{font-size:1.16rem;}
  .hib-pp .hib-cl .hib-btn{font-size:8.5px;padding:0.5rem 0.85rem;}
  .hib-pp .hib-cl .hib-tag{font-size:7px;}
}
@media (max-width:380px),(max-height:648px){
  .hib-stage.hib-portrait .hib-pp{padding-bottom:2.25rem;}
  .hib-stage.hib-portrait .hib-pp .hib-para{font-size:0.85rem;line-height:1.42;margin-bottom:0.4rem;}
  .hib-stage.hib-portrait .hib-pp .hib-feature{font-size:0.95rem;margin-top:0.55rem;}
  .hib-stage.hib-portrait .hib-pp .hib-art{margin:0.25rem auto 0.68rem;}
  .hib-stage.hib-portrait .hib-pp.hib-below .hib-art{margin:0.68rem auto 0.25rem;}
  .hib-stage.hib-portrait .hib-pp .hib-wscatter{width:68%;margin:0.15rem auto 0.55rem;}
  .hib-stage.hib-portrait .hib-arrow{width:30px;height:30px;bottom:7px;}
  .hib-stage.hib-portrait .hib-arrow.hib-prev{left:20%;}
  .hib-stage.hib-portrait .hib-arrow.hib-next{left:53%;}
  .hib-stage.hib-portrait .hib-pp .hib-cl{margin-top:0;}
  .hib-stage.hib-portrait .hib-pp .hib-cl .hib-btn{font-size:8px;padding:0.42rem 0.75rem;}
  .hib-stage.hib-portrait .hib-pp .hib-cl .hib-ask-ico{width:15px;height:15px;}
  .hib-stage.hib-portrait .hib-pp .hib-cl .hib-tag{font-size:6.5px;margin-top:0.35rem;}
}

/* ---------------- closed book intro ---------------- */
.hib-book{opacity:0;transition:opacity .55s ease .2s;pointer-events:none;}
.hib-opened .hib-book{opacity:1;pointer-events:auto;}
.hib-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;transition:opacity .5s ease;}
.hib-intro.hib-gone{opacity:0;pointer-events:none;}
.hib-closed-book{position:relative;aspect-ratio:3/3.86;border-radius:4px 9px 9px 4px;
  background:linear-gradient(160deg,#1b2a30 0%,#24383f 46%,#0e1a1f 100%);
  box-shadow:0 20px 48px rgba(16,12,8,0.42), inset 0 0 0 1px rgba(247,242,234,0.05);
  transform-origin:left center;transition:transform .85s cubic-bezier(.5,.05,.3,1), opacity .85s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:clamp(1.3rem,3.5vw,2rem);cursor:pointer;}
.hib-stage.hib-landscape .hib-closed-book{width:min(47.5%,468px);}
.hib-stage.hib-portrait .hib-closed-book{width:min(91.5%,392px);}
.hib-opening .hib-closed-book{transform:rotateY(-108deg);opacity:0;}
.hib-closed-book::after{content:"";position:absolute;right:-5px;top:7px;bottom:7px;width:5px;border-radius:0 3px 3px 0;background:repeating-linear-gradient(90deg,#e8dec9 0 1px,#cbbd9f 1px 2px);}
.hib-closed-book::before{content:"";position:absolute;left:4px;top:9px;bottom:9px;width:2px;background:rgba(0,0,0,0.32);border-radius:2px;}
.hib-cb-frame{position:absolute;inset:10px;border:1px solid rgba(200,184,122,0.30);border-radius:5px;pointer-events:none;}
.hib-cb-frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(200,184,122,0.13);border-radius:3px;}
.hib-cb-log{font-family:var(--hib-sans);font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--hib-gold-pale);}
.hib-cb-sketch{width:72%;aspect-ratio:4/3;border:1px solid rgba(247,242,234,0.16);border-radius:3px;overflow:hidden;
  background:repeating-linear-gradient(45deg, rgba(247,242,234,0.05) 0 6px, rgba(247,242,234,0) 6px 12px),repeating-linear-gradient(-45deg, rgba(247,242,234,0.04) 0 6px, rgba(247,242,234,0) 6px 12px);
  display:flex;align-items:center;justify-content:center;margin:0.2rem 0;}
.hib-cb-sketch img{width:100%;height:100%;object-fit:cover;display:block;}
.hib-cb-sketch .hib-slbl{font-family:var(--hib-sans);font-size:7.5px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(247,242,234,0.42);}
.hib-cb-compass{width:28px;height:28px;}
.hib-cb-title{font-family:var(--hib-serif);font-weight:500;font-size:clamp(1.4rem,6vw,2rem);line-height:1.04;color:var(--hib-cream);text-align:center;text-shadow:0 2px 18px rgba(0,0,0,0.5);}
.hib-cb-sub{font-family:var(--hib-serif);font-style:italic;font-size:clamp(0.82rem,3.6vw,1rem);color:rgba(247,242,234,0.8);text-align:center;}
.hib-cb-tag{font-family:var(--hib-sans);font-size:8.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--hib-gold-pale);text-align:center;margin-top:0.25rem;}
.hib-tab{position:absolute;right:-44px;top:50%;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;animation:hib-tabnudge 1.7s ease-in-out infinite;}
.hib-root .hib-tab-btn{width:44px;height:58px;border-radius:0 11px 11px 0;background:linear-gradient(90deg,#9B8A35,#7A6820);display:flex;align-items:center;justify-content:center;box-shadow:4px 5px 13px rgba(16,12,8,0.32);}
.hib-tab-btn svg{width:23px;height:23px;}
.hib-tab-lbl{font-family:var(--hib-sans);font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--hib-gold);}
@keyframes hib-tabnudge{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-50%) translateX(6px);}}

/* ---------------- per-block style options (set in the backend) ---------------- */
.hib-ta-left{text-align:left;}
.hib-ta-center{text-align:center;}
.hib-ta-right{text-align:right;}
.hib-art.hib-ta-left{margin-left:0;margin-right:auto;}
.hib-art.hib-ta-right{margin-left:auto;margin-right:0;}

.hib-c-cream{color:var(--hib-cream);}
.hib-c-gold{color:var(--hib-gold-pale);}
.hib-c-muted{color:rgba(247,242,234,0.78);}
.hib-c-dim{color:rgba(247,242,234,0.55);}
.hib-c-dark{color:#1a1812;text-shadow:none;}

.hib-pp .hib-fs-xs,.hib-rp .hib-fs-xs{font-size:clamp(0.72rem,2.6vw,0.84rem);}
.hib-pp .hib-fs-s,.hib-rp .hib-fs-s{font-size:clamp(0.84rem,3.2vw,0.96rem);}
.hib-pp .hib-fs-m,.hib-rp .hib-fs-m{font-size:clamp(0.98rem,4vw,1.15rem);}
.hib-pp .hib-fs-l,.hib-rp .hib-fs-l{font-size:clamp(1.18rem,5vw,1.5rem);}
.hib-pp .hib-fs-xl,.hib-rp .hib-fs-xl{font-size:clamp(1.4rem,6vw,1.95rem);}
.hib-pp .hib-fs-xxl,.hib-rp .hib-fs-xxl{font-size:clamp(1.7rem,7vw,2.6rem);}
.hib-dbl .hib-fs-xs{font-size:clamp(0.7rem,1.2vw,0.8rem);}
.hib-dbl .hib-fs-s{font-size:clamp(0.8rem,1.4vw,0.92rem);}
.hib-dbl .hib-fs-m{font-size:clamp(0.92rem,1.6vw,1.08rem);}
.hib-dbl .hib-fs-l{font-size:clamp(1.05rem,2vw,1.35rem);}
.hib-dbl .hib-fs-xl{font-size:clamp(1.25rem,2.4vw,1.7rem);}
.hib-dbl .hib-fs-xxl{font-size:clamp(1.5rem,3vw,2.2rem);}

/* ---------------- accessibility / fallbacks ---------------- */
@media (prefers-reduced-motion:reduce){
  .hib-root .hib-leaf,.hib-root .hib-closed-book,.hib-root .hib-book,.hib-root .hib-intro{transition-duration:.01ms !important;}
  .hib-root .hib-tab{animation:none;}
}
/* before JS boots, and when JS is unavailable, show the story as a readable column */
.hib-root.hib-no-js{height:auto;max-height:none;overflow:visible;display:block;padding:clamp(1.2rem,4vw,2.5rem);}
.hib-root.hib-no-js .hib-stage{width:100%;height:auto;aspect-ratio:auto;perspective:none;}
.hib-root.hib-no-js .hib-book{position:static;opacity:1;pointer-events:auto;display:flex;flex-direction:column;gap:1.2rem;max-width:70ch;margin:0 auto;}
.hib-root.hib-no-js .hib-page{position:relative;min-height:0;border-radius:6px;overflow:hidden;padding:clamp(1.2rem,4vw,2rem);}
.hib-root.hib-no-js .hib-pp{position:static;padding:0;}
.hib-root.hib-no-js .hib-num,.hib-root.hib-no-js .hib-hint{display:none;}
.hib-root.hib-no-js .hib-intro{position:static;margin-bottom:1.5rem;}