/* ==========================================================================
   Web view for a guide. The interior page CSS (the exact print design) is
   inlined per-page, scoped under .sheet. This file supplies the dark reading
   environment, the page-sheet framing, the sticky chrome, and responsive
   scaling. Fonts come from fonts.css.
   ========================================================================== */

:root{
  --ground-1:#3b3a3c; --ground-2:#0c0c0d;      /* cover-like vertical ramp */
  --ink:#e9e7e3; --muted:#9d9b98; --line:#39383a;
  --panel:#202021; --panel-2:#2a2a2c; --accent:#7fb8d4;
  --pagew:816px; --pageh:1056px;                /* 612x792pt at 96dpi */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Lato',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,var(--ground-1) 0%, var(--ground-2) 42%, #000 100%) fixed;
  min-height:100vh;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- top site bar --------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  height:52px; padding:0 22px; box-sizing:border-box;
  background:rgba(12,12,13,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.02em; }
.logo2x2{ display:grid; grid-template-columns:1fr 1fr; gap:2px; width:34px; flex:none; }
.logo2x2 img{ width:100%; display:block; }
.brand .mark{ font-family:'Lora',serif; font-size:20px; color:#fff; }
.brand .sub{ font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
.brand .brandfull{ font-family:'Lato',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; line-height:1.15; white-space:nowrap; }
.site-nav a{ color:var(--ink); font-size:13px; margin-left:20px; letter-spacing:.03em; }
.site-nav a:hover{ color:#fff; text-decoration:none; }
.navtoggle{ display:none; background:none; border:0; color:#fff; font-size:22px; line-height:1;
  cursor:pointer; padding:6px 4px; margin-left:8px; }

/* ---- guide toolbar -------------------------------------------------------*/
.guidebar{
  position:sticky; top:52px; z-index:30; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; padding:9px 20px; background:rgba(20,20,21,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.guidebar .gtitle{ font-family:'Lora',serif; font-size:15px; color:#fff; }
.guidebar .gtitle small{ font-family:'Lato',sans-serif; color:var(--muted);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-left:8px; }
.guidebar .spacer{ flex:1; }
.pager{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.pager button{
  font:inherit; color:var(--ink); background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; width:28px; height:28px; cursor:pointer; line-height:1;
}
.pager button:hover{ background:#343436; }
.pager .cur{ min-width:64px; text-align:center; }
.pager input{
  width:44px; font:inherit; text-align:center; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 4px;
}
.dl{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  color:#0c0c0d; background:var(--accent); padding:7px 13px; border-radius:7px;
}
.dl:hover{ background:#a6d2e6; text-decoration:none; }

/* ---- the reading stage & page sheets ------------------------------------*/
.stage{ display:flex; justify-content:center; overflow-x:hidden; padding:22px 12px 80px; }
.sizer{ position:relative; }
.sheets{ width:var(--pagew); transform-origin:top left; }
.sheet{
  position:relative; width:var(--pagew); height:var(--pageh);
  background:#fff; color:#000; margin:0 auto 26px; overflow:hidden;
  border-radius:2px; box-shadow:0 6px 26px rgba(0,0,0,.55);
}
.sheet:last-child{ margin-bottom:0; }
/* Non-bleed pages: inset the print content box by the original @page margins
   (72/60/48/60 pt) so the folio, footer and badge land exactly as in the PDF. */
.sheet > .page{ position:absolute; top:96px; left:80px; width:656px; height:896px; }
.sheet.bleed{ }
.sheet.bleed > .page{ position:absolute; inset:0; top:0; left:0; width:var(--pagew); height:var(--pageh); }

/* ---- site footer ---------------------------------------------------------*/
.site-footer{
  border-top:1px solid var(--line); padding:26px 20px 40px; color:var(--muted);
  font-size:12.5px; line-height:1.6; text-align:center; background:rgba(0,0,0,.35);
}
.site-footer a{ color:var(--ink); }
.site-footer .fnote{ max-width:640px; margin:8px auto 0; }
.site-footer .cc{ color:var(--muted); }
.site-footer .cc:hover{ color:var(--ink); text-decoration:none; }
.site-footer .cc svg{ display:inline-block; vertical-align:middle; width:20px; height:20px; margin:0 2px; }

/* ---- responsive ----------------------------------------------------------*/
@media (max-width:820px){
  .brand .brandfull{ font-size:12px; letter-spacing:.1em; }
  .site-nav a{ margin-left:14px; }
}
@media (max-width:760px){
  .site-header{ display:block; height:auto; min-height:0; padding:13px 16px; }
  .brand{ display:flex; align-items:center; gap:9px; padding-right:40px; }
  .logo2x2{ width:26px; }
  .brand .brandfull{ font-size:11px; letter-spacing:.04em; white-space:normal; }
  .navtoggle{ display:block; position:absolute; top:11px; right:12px; }
  .site-nav{ display:none; margin-top:11px; }
  .site-header.nav-open .site-nav{ display:block; }
  .site-nav a{ display:block; margin:0; padding:10px 2px; font-size:14px; border-top:1px solid var(--line); }
  .guidebar{ position:static; top:auto; gap:10px; }
  .guidebar .gtitle small{ display:none; }
}
@media print{
  .site-header,.guidebar,.site-footer{ display:none; }
  .stage{ padding:0; } .sheet{ box-shadow:none; margin:0; }
}