/* ============ BALI 35MM ZINES — chrome + page system ============ */
:root{
  --ink:#13110d;
  --app-bg:#15140f;
  --app-bg2:#1d1b15;
  --line:#3a372d;
  --bone:#efe7d6;
  --bone-2:#e4d9c2;
  --amber:#caa25a;
  --dark-paper:#0b0d0c;
  --dark-paper2:#10110f;
  --pageW: 384px;            /* booklet page width */
  --pageH: 543px;            /* 384 * 1.4142 */
  --mono:"Space Mono",ui-monospace,monospace;
  --disp:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box;}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(120% 90% at 50% -10%, #211f18 0%, var(--app-bg) 55%, #100f0b 100%);
  color:var(--bone);
  font-family:var(--disp);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:22px;
  padding:14px 26px;
  background:linear-gradient(#15140fcc,#15140f66);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:12px;margin-right:auto;}
.brand .mark{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;
  color:var(--amber);text-transform:uppercase;
}
.brand .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#8c8675;}

.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.seg button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:#9a9484;border:0;padding:9px 15px;cursor:pointer;
  transition:.18s;white-space:nowrap;
}
.seg button+button{border-left:1px solid var(--line);}
.seg button:hover{color:var(--bone);background:#ffffff09;}
.seg button[aria-selected="true"]{background:var(--bone);color:#16140f;}

.spacer{flex:1;}
.tool{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:#9a9484;border:1px solid var(--line);border-radius:2px;
  padding:9px 14px;cursor:pointer;transition:.18s;display:inline-flex;gap:8px;align-items:center;
}
.tool:hover{color:var(--bone);border-color:#6d6855;}
.tool.primary{background:var(--amber);color:#1a1407;border-color:var(--amber);}
.tool.primary:hover{background:#d8b066;}

/* ---------------- stage ---------------- */
.stage{
  min-height:calc(100vh - 58px);
  display:flex;flex-direction:column;align-items:center;
  padding:38px 20px 70px;
}
.view{display:none;width:100%;flex-direction:column;align-items:center;}
.view.active{display:flex;}

/* ---------------- embed mode (just the zine) ---------------- */
.embed-switch{display:none;}
body.embed .topbar{display:none;}
body.embed .standfirst{display:none;}
body.embed #view-print{display:none !important;}
body.embed .stage{min-height:100vh;padding:26px 18px 30px;justify-content:center;}
body.embed .strip{margin-top:40px;}
body.embed .embed-switch{display:none;}
body.embed .embed-switch button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:#9a9484;border:0;padding:9px 16px;cursor:pointer;transition:.18s;white-space:nowrap;
}
body.embed .embed-switch button+button{border-left:1px solid var(--line);}
body.embed .embed-switch button:hover{color:var(--bone);background:#ffffff09;}
body.embed .embed-switch button[aria-selected="true"]{background:var(--bone);color:#16140f;}

/* intro line above booklet */
.standfirst{
  max-width:560px;text-align:center;margin:0 0 30px;
}
.standfirst .t{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px;
}
.standfirst .d{font-size:15px;line-height:1.55;color:#bdb6a4;font-weight:400;}
.standfirst .d b{color:var(--bone);font-weight:600;}

/* ---------------- booklet ---------------- */
.booklet{display:flex;align-items:center;gap:26px;}
.nav{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);background:#ffffff07;color:var(--bone);
  font-size:20px;cursor:pointer;flex:none;transition:.18s;
  display:flex;align-items:center;justify-content:center;
}
.nav:hover{background:#ffffff12;border-color:#6d6855;}
.nav:disabled{opacity:.25;cursor:default;}

.frame{
  width:var(--pageW);height:var(--pageH);position:relative;
  perspective:1700px;
}
.frame .shadow{
  position:absolute;inset:auto 0 -26px 0;height:40px;
  background:radial-gradient(60% 100% at 50% 0,#0009,transparent 72%);
  filter:blur(2px);
}
.flipper{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.6,.02,.25,1),opacity .5s;
}
.flipper.turn{transform:rotateY(-14deg);opacity:.0;}

.pageno{
  position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:#8c8675;white-space:nowrap;
}
.pageno b{color:var(--bone);}

/* contact strip */
.strip{
  display:flex;gap:8px;margin-top:64px;flex-wrap:wrap;justify-content:center;max-width:760px;
}
.thumb{
  width:54px;height:76px;border:1px solid var(--line);position:relative;cursor:pointer;
  background:#000;overflow:hidden;opacity:.62;transition:.18s;border-radius:1px;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb.lab{display:flex;align-items:center;justify-content:center;}
.thumb .pn{
  position:absolute;left:3px;top:2px;font-family:var(--mono);font-size:8px;color:#fff;
  text-shadow:0 1px 2px #000;
}
.thumb:hover{opacity:1;}
.thumb[aria-current="true"]{opacity:1;border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}

/* ================= PAGE SYSTEM ================= */
.page{
  width:100%;height:100%;position:relative;overflow:hidden;
  background:var(--dark-paper);
  box-shadow:0 24px 60px -24px #000c, 0 2px 0 #ffffff10 inset;
  container-type:inline-size;
}
/* booklet stacking */
.flipper .page{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;}
.flipper .page.is-on{opacity:1;visibility:visible;pointer-events:auto;}
.page[data-tone="family"]{background:var(--bone);}
.page-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;
}
/* film edge strip */
.filmedge{
  position:absolute;left:0;right:0;height:5.7cqw;z-index:5;
  display:flex;align-items:center;gap:2.6cqw;padding:0 3.1cqw;
  font-family:var(--mono);font-size:2.18cqw;letter-spacing:.16em;text-transform:uppercase;color:#f4ead2;
  background:
    linear-gradient(#000000a8,#00000030),
    repeating-linear-gradient(90deg,#f4ead2 0 6px,transparent 6px 13px);
  background-size:auto, auto;
  background-blend-mode:normal;
}
.filmedge.top{top:0;}
.filmedge .stock{background:#000;padding:0.5cqw 1.6cqw;letter-spacing:.14em;}
.filmedge .fr{margin-left:auto;color:#f4ead2;background:#000;padding:0.5cqw 1.6cqw;}
/* render sprocket holes as a separate thin track so text stays legible */
.filmedge::before,.filmedge::after{content:none;}

.cap{
  position:absolute;left:0;right:0;bottom:0;z-index:5;padding:8.8cqw 3.6cqw 3.6cqw;
  background:linear-gradient(transparent,#000000d8 72%);
}
.page[data-tone="family"] .cap{background:linear-gradient(transparent,#241d10cc 78%);}
.cap-t{
  display:block;font-family:var(--disp);font-weight:600;font-size:4.2cqw;letter-spacing:.005em;
  color:#fff;text-wrap:balance;line-height:1.12;
}
.cap-m{
  display:block;margin-top:1.5cqw;font-family:var(--mono);font-size:2.18cqw;letter-spacing:.2em;
  text-transform:uppercase;color:#d8ccaf;
}

/* cover */
.cover-meta{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;
  padding:6.8cqw 5.7cqw;
  background:linear-gradient(transparent 36%,#000000b0 86%);}
.page[data-tone="family"] .cover-meta{background:linear-gradient(transparent 30%,#1c150bb5 88%);}
.kicker{font-family:var(--mono);font-size:2.45cqw;letter-spacing:.30em;text-transform:uppercase;color:var(--amber);margin-bottom:3.6cqw;}
.cover-title{
  font-family:var(--disp);font-weight:800;font-size:14cqw;line-height:.9;letter-spacing:-.02em;
  margin:0;color:#fff;text-transform:uppercase;
}
.page[data-tone="family"] .cover-title{color:#fff;}
.cover-sub{margin-top:3.6cqw;font-size:3.5cqw;color:#e7ddca;font-weight:400;max-width:84%;line-height:1.35;}
.cover-credit{margin-top:4.6cqw;font-family:var(--mono);font-size:2.34cqw;letter-spacing:.22em;text-transform:uppercase;color:#cdbf9f;}
.cover-rule{height:1px;background:#ffffff44;margin:4.1cqw 0 0;}

/* colophon / back cover */
.colophon{position:absolute;inset:0;z-index:6;padding:7.8cqw 6.8cqw;display:flex;flex-direction:column;}
.page[data-tone="dark"] .colophon{color:#d9d2c2;background:var(--dark-paper2);}
.page[data-tone="family"] .colophon{color:#40382a;background:var(--bone-2);}
.colo-mark{font-family:var(--mono);font-size:2.34cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);}
.colo-title{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:7.8cqw;line-height:.92;letter-spacing:-.01em;margin:3.6cqw 0 0;}
.page[data-tone="dark"] .colo-title{color:#f1ece0;}
.colo-line{font-family:var(--mono);font-size:2.45cqw;letter-spacing:.14em;margin-top:2.6cqw;color:inherit;opacity:.78;text-transform:uppercase;}
.colo-block{font-family:var(--mono);font-size:2.6cqw;line-height:1.8;margin-top:auto;letter-spacing:.04em;}
.colo-block .l{display:flex;justify-content:space-between;gap:3.6cqw;border-top:1px solid currentColor;padding:1.8cqw 0;opacity:.86;}
.colo-block .l span:first-child{opacity:.6;}
.colo-foot{font-family:var(--mono);font-size:2.18cqw;letter-spacing:.2em;text-transform:uppercase;margin-top:4.1cqw;opacity:.6;}

/* mini imposition diagram on colophon */
.mini-impo{margin-top:4.1cqw;width:33cqw;}
.mini-impo .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:6.7cqw;border:1px solid currentColor;}
.mini-impo .c{border-right:1px solid currentColor;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:2.08cqw;display:flex;align-items:center;justify-content:center;opacity:.55;}
.mini-impo .c:nth-child(4n){border-right:0;}
.mini-impo .c.top{transform:rotate(180deg);}
.mini-impo .cutline{height:0;border-top:2px solid #d2492f;width:50%;margin:-3.35cqw auto 0;position:relative;}

/* ================= PRINT SHEET ================= */
.printwrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;}
.sheet-meta{max-width:740px;text-align:center;}
.sheet-meta .t{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;}
.sheet-meta .d{font-size:14px;color:#bdb6a4;line-height:1.55;}
.sheet-meta .d b{color:var(--bone);font-weight:600;}

.sheet-scale{
  --sheetW:1010px;            /* on-screen A4 landscape width */
  width:var(--sheetW);max-width:96vw;
}
.sheet{
  position:relative;width:var(--sheetW);height:calc(var(--sheetW) * 0.7071);
  background:#000;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  box-shadow:0 30px 80px -30px #000;
}
.sheet .cell{position:relative;overflow:hidden;}
.sheet .cell.rot{transform:rotate(180deg);}
.sheet .cell .page{box-shadow:none;}

/* stacked sheets (16-page = two sheets) */
.sheet-unit{display:flex;flex-direction:column;align-items:center;gap:11px;margin-bottom:30px;}
.sheet-unit:last-child{margin-bottom:0;}
.sheet-unit-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.sheet-unit-label span{color:#8c8675;}

/* guide overlay */
.guides{position:absolute;inset:0;pointer-events:none;z-index:30;}
.guides.hide{display:none;}
.guides .fold{position:absolute;background:none;}
.guides .v{top:0;bottom:0;width:0;border-left:1px dashed #ffffff8c;mix-blend-mode:difference;}
.guides .h-fold{left:0;height:0;border-top:1px dashed #ffffff8c;mix-blend-mode:difference;}
.guides .cut{
  position:absolute;height:0;border-top:2px solid #e2502f;left:25%;width:50%;top:50%;
}
.guides .cut .tag{position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  background:#e2502f;color:#fff;font-family:var(--mono);font-size:8px;letter-spacing:.2em;padding:2px 7px;border-radius:1px;}
.guides .foldtag{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:#fff;background:#0008;padding:2px 6px;mix-blend-mode:normal;}

/* fold instructions card */
.howto{
  max-width:740px;width:100%;border:1px solid var(--line);border-radius:3px;
  background:#ffffff05;padding:20px 22px;margin-top:6px;
}
.howto h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;font-weight:700;}
.howto ol{margin:0;padding-left:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;}
.howto li{counter-increment:s;font-family:var(--mono);font-size:11px;line-height:1.5;color:#c7c0ad;padding-left:30px;position:relative;}
.howto li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--amber);}

/* ---------------- print media ---------------- */
@media print{
  @page{size:A4 landscape;margin:6mm;}
  *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{background:#fff;height:auto;}
  .topbar,.standfirst,.booklet,.strip,.sheet-meta,.howto,.nav,.pageno{display:none !important;}
  .stage{padding:0;min-height:0;display:block;}
  .view#view-book{display:none !important;}
  .view#view-print{display:flex !important;}
  .printwrap{gap:0;}
  .sheet-scale{width:285mm !important;max-width:none !important;}
  .sheet{width:285mm !important;height:198mm !important;box-shadow:none !important;}
  .sheet-unit{margin:0 !important;gap:0 !important;break-after:page;page-break-after:always;}
  .sheet-unit:last-child{break-after:auto;page-break-after:auto;}
  .sheet-unit-label{display:none !important;}
  .guides.hide-print{display:none !important;}
}

@media (max-width:520px){
  :root{--pageW:300px;--pageH:424px;}
  .booklet{gap:10px;}
  .nav{width:42px;height:42px;}
}