/* Isolated visual kanbun reader. Copyright 2026 Hanpu Li.
 * It does not style or modify the portfolio document. */
/* Each sandbox frame is a separate font-loading document: the host page's
   @font-face declarations do not cross into it. Reuse the site's already
   distributed Japanese and Chinese webfonts. */
@font-face {
  font-family:"Shippori Mincho";
  src:url("../fonts/shippori-mincho-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face {
  font-family:"Shippori Common";
  src:url("../fonts/shippori-mincho-common.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+51FD,U+65E5,U+674E,U+749E,U+7559,U+7E41,U+8A5E,U+8B49;
}
@font-face {
  font-family:"Hanpu Chinese";
  src:url("../fonts/hanpu-chinese.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
.kanbun,
.kanbun:lang(ja),
.kanbun :lang(ja),
.kanbun .dash,
.kanbun .ellipsis {
  font-family:"Shippori Common","Shippori Mincho","Hanpu Chinese",serif;
}
:root { color-scheme:light dark; }
html, body {
  margin:0; padding:0; overflow:hidden; width:max-content;
  background:transparent; color:#27231e;
  font-family: "Shippori Mincho", "Yu Mincho", YuMincho, serif;
}
body { padding:12px 15px; box-sizing:content-box; }
/* kanbun-render.css owns the cells and the 行款 of each column. The outer
   flex layout only lays the one stream of columns (title, preface, body)
   right to left, wrapping into right-aligned bands when the frame is too
   narrow for all of them. */
#kanbun-display.kanbun {
  margin:0; padding:0;
  width:max-content; max-width:var(--kanbun-content-cap, 1000px);
  height:auto; display:flex; flex-flow:row-reverse wrap; align-items:flex-start;
  column-gap:.8em; row-gap:0;
  writing-mode:horizontal-tb; text-orientation:mixed;
  font-family:"Shippori Mincho", "Yu Mincho", YuMincho, serif;
  font-size:23px; font-weight:400; line-height:1;
}
/* The title block keeps the top right. The body sits to its left, every
   band flush with the body's own right edge, or (when fewer than four
   columns would fit beside it) starts in a band of its own below. */
#kanbun-display .kanbun-head {
  display:flex; flex-flow:row-reverse wrap; align-items:flex-start;
  column-gap:.12em; row-gap:1.6em; flex:none; max-width:100%;
}
#kanbun-display .kanbun-text { flex:none; max-width:100%; }
#kanbun-display[data-kanbun-layout="below"] .kanbun-text { flex-basis:100%; width:auto !important; }
#kanbun-display .kanbun-band {
  display:flex; flex-direction:row-reverse; align-items:flex-start; column-gap:.12em;
}
/* A band break reads as turning to the next half-leaf: clear space and a
   hairline across the band. */
#kanbun-display .kanbun-band + .kanbun-band,
#kanbun-display[data-kanbun-layout="below"] .kanbun-text {
  margin-top:.9em; padding-top:.9em;
  border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);
}
/* 返り点 in vermilion, after the 朱点 of glossed manuscripts; site accent values. */
:root { --kanbun-vermilion:#8a2f1d; }
@media(prefers-color-scheme:dark){
  html,body {color:#eae7e1;background:transparent;}
  :root { --kanbun-vermilion:#cf765e; }
}
@media(forced-colors:active){ :root { --kanbun-vermilion:CanvasText; } }