/* roofbook.com library + hub pages — shares the dark theme tokens from styles.css */
/* Library/hub pages scroll naturally and keep ONE viewport-locked vertical gradient — no scroll
   seam/staging. (The flip-book viewer never loads library.css, so it keeps height:100%+overflow:hidden.) */
html{height:auto;min-height:100%}
body{height:auto;min-height:100vh;overflow:visible;background-attachment:fixed}
.lib{max-width:1180px;margin:0 auto;padding:72px 22px 80px;color:var(--text)}
/* homepage hub: center the whole thing in the viewport, both axes */
body.hubpage .lib{min-height:100vh;max-width:none;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:70px 22px 44px}
.libhead{margin:8px 0 30px}
.libhead.center{text-align:center;max-width:760px;margin:18px auto 40px}
.libhead h1{font-size:30px;line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.libhead p{font-size:15px;line-height:1.55;color:var(--muted);margin:0;max-width:780px}
.libhead.center p{margin:0 auto}

/* brand library — sections grouped by document type */
.catsec{margin:0 0 34px}
.catsec h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--panel-line)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:20px}

.bcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.bcard:hover{transform:translateY(-4px);border-color:#55606e;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.bthumb{display:block;background:#0d0f14;aspect-ratio:1/1.294;overflow:hidden}
.bthumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.bbody{display:flex;flex-direction:column;gap:6px;padding:14px 15px 16px}
.bcat{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--brand)}
.btitle{font-size:14px;line-height:1.32;font-weight:600}
.bmeta{font-size:11.5px;color:var(--muted);margin-top:2px}

/* root hub — two brand cards */
.brandgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:840px;margin:0 auto}
.brandcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:230px;padding:34px 26px;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:16px;text-decoration:none;color:var(--text);
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.brandcard:not(.soon):hover{transform:translateY(-5px);border-color:#55606e;box-shadow:0 20px 44px rgba(0,0,0,.45)}
.brandcard .bclogo{height:60px;width:auto;max-width:80%;object-fit:contain}
.brandcard .bcw{font-size:26px;font-weight:800;letter-spacing:.02em}
.brandcard .bcn{font-size:13px;color:var(--muted)}
.brandcard .bcgo{font-size:13.5px;font-weight:700;color:var(--brand)}
.brandcard.soon{opacity:.55;cursor:default}

/* hub hero wordmark logo (replaces the "roofbook.com" text), centered */
.libhead .hubh1{margin:0 0 100px;line-height:0}   /* beats .libhead h1 (0,1,1) so the gap actually applies */
.hublogo{display:block;margin:0 auto;width:min(250px,46vw);height:auto}

/* breadcrumb */
.crumbs{margin:0 0 18px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{margin:0 8px;color:#566}
.crumbs [aria-current]{color:var(--text)}

/* brochure centerpiece — wide, true landscape aspect, cover + description side by side */
.catsec.featured .fcard{display:flex;gap:28px;align-items:stretch;background:var(--panel);
  border:1px solid var(--panel-line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.catsec.featured .fcard:hover{transform:translateY(-3px);border-color:#55606e;box-shadow:0 18px 40px rgba(0,0,0,.42)}
.fthumb{flex:0 0 56%;background:#0d0f14;overflow:hidden}
.fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.fbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:28px 32px 28px 0}
.ftitle{font-size:23px;line-height:1.22;font-weight:700}
.fdesc{font-size:14px;line-height:1.55;color:var(--muted)}
@media (max-width:640px){
  .catsec.featured .fcard{flex-direction:column;gap:0}
  .fthumb{flex:none}.fbody{padding:18px 18px 22px}
}

/* interlockroofing.com footer (non-flip-book pages) */
.site-footer{margin-top:70px;border-top:1px solid var(--panel-line);background:transparent}
.fwrap{max-width:1180px;margin:0 auto;padding:48px 22px 34px}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.fcol h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 14px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 9px}
.fcol a,.flegal a,.fsocial a{color:var(--muted);text-decoration:none;font-size:13.5px}
.fcol a:hover,.flegal a:hover,.fsocial a:hover{color:#fff;text-decoration:underline}
.fsocial{display:flex;flex-wrap:wrap;gap:8px 18px;margin:34px 0 18px;padding-top:24px;border-top:1px solid var(--panel-line)}
.flegal{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;font-size:12.5px;color:var(--muted)}
.flegal .sep{color:#566}
.fcopy{margin:18px 0 0;font-size:11.5px;line-height:1.6;color:#7c8794;max-width:880px}
@media (max-width:640px){.fcols{grid-template-columns:1fr 1fr;gap:22px}}

@media (max-width:560px){
  .libhead h1{font-size:24px}
  .bgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}