/*!
 * 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:4px;
  /* Room below the book for the page counter and the scroll hint, which sit
     outside the stage box. Without reserving it the auto height would clip
     them, because the root hides its overflow. */
  --hib-textgap:20px;
  /* The tallest the whole thing may get. The book shrinks to fit rather than
     overflowing, so the height still follows the content. */
  --hib-vcap:88vh;

  position:relative;
  /* Was 88vh, which forced the block to fill the viewport whatever the book
     measured — the leftover space is what showed up as deep gaps above and
     below it. Auto makes the height the book plus its caption plus padding. */
  height:var(--hib-height,auto);
  min-height:var(--hib-min-height,0);
  max-height:var(--hib-max-height,none);
  /* Background is set on the wrapping section in Bricks, not here. */
  background:transparent;
  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);
  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;margin-bottom:var(--hib-textgap);}
/* Width is capped by the height available as well as by the page, so on a
   short screen the book scales down instead of being cut off. 1.5625 and
   0.575 are the two aspect ratios written the other way round. */
.hib-stage.hib-landscape{perspective:2800px;aspect-ratio:1000/640;
  width:min(100%,1000px,calc((var(--hib-vcap) - var(--hib-textgap) - 2 * var(--hib-pad)) * 1.5625));}
.hib-stage.hib-portrait{perspective:2400px;aspect-ratio:460/800;
  width:min(100%,460px,calc((var(--hib-vcap) - var(--hib-textgap) - 2 * var(--hib-pad)) * 0.575));}
.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:-4px;height:16px;
  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 8px 22px rgba(28,20,10,0.26);}
.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 8px 22px rgba(28,20,10,0.26);}
.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:4px;}
.hib-arrow.hib-next{right:4px;}
.hib-arrow:active{transform:translateY(-50%) scale(0.92);}
.hib-arrow.hib-hidden{opacity:0;pointer-events:none;}

.hib-counter{position:absolute;bottom:calc(-1 * var(--hib-textgap));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:calc(-1 * var(--hib-textgap));left:0;right:0;width:100%;padding:0 14px;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-root{--hib-textgap:16px;}
  .hib-hint{font-size:7.5px;letter-spacing:0.1em;padding:0 10px;}
}

/* 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 10px 26px rgba(16,12,8,0.28), 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:0;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;}