/* 上村朔之介随筆集 — 縦組リーダー */
@font-face{
  font-family:'New Tegomin';
  src:url('f/tegomin.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --paper:#efe7d5;
  --ink:#241f1b;
  --ink-soft:#6b6055;
  --rule:#b2846f;
  --shiori:#8c3b3b;
  --fs:20px;
  --lh:38px;
  --pageW:320px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#191c21;
    --ink:#cdc6b8;
    --ink-soft:#8b8478;
    --rule:#6d5a54;
    --shiori:#a45252;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'New Tegomin',"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
/* 紙の地合い */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.5;
}
@media (prefers-color-scheme: dark){ body::before{mix-blend-mode:screen;opacity:.18} }

/* ── 本文の舞台 ───────────────────────── */
#stage{position:fixed;inset:0;height:100dvh;overflow:hidden;z-index:1}
#win{position:absolute;overflow:hidden}
#flow{
  position:absolute;top:0;bottom:0;right:0;
  writing-mode:vertical-rl;
  -webkit-writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:var(--fs);
  line-height:var(--lh);
  letter-spacing:.02em;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  hanging-punctuation:allow-end;
  will-change:transform;
  transform:translateX(0);
}
#flow.anim{transition:transform .34s cubic-bezier(.22,.7,.2,1)}
#flow p{margin:0;text-indent:1em}
#flow .yoko{
  text-orientation:sideways;-webkit-text-orientation:sideways;
  white-space:nowrap;letter-spacing:0;font-size:.94em;
}
#flow p.nodent{text-indent:0}
#flow p+p{margin-block-start:0}
#flow .sp{display:block;inline-size:100%}

/* 引用 */
#flow .quote{
  display:flow-root;margin-block:1.4em;padding-inline:1.6em;
  font-size:.9em;line-height:1.9;color:var(--ink);
}
#flow .quote span{display:block;text-indent:0}
#flow .quote span+span{margin-block-start:.2em}

/* 図版 */
#flow figure{margin:0;display:block;text-align:center}
#flow figure img{
  display:block;margin:0 auto;
  block-size:auto;max-block-size:calc(var(--pageW) - 2.4em);
  inline-size:auto;max-inline-size:78%;
  filter:grayscale(1) contrast(.92) brightness(1.03);
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){
  #flow figure img{mix-blend-mode:normal;filter:grayscale(1) contrast(.9) brightness(.82)}
}
#flow figcaption{
  font-size:.72em;color:var(--ink-soft);margin-block-start:1.2em;
  letter-spacing:.08em;
}

/* 扉・奥付 */
#flow .sheet{display:flow-root;block-size:var(--pageW);inline-size:100%;position:relative}
.sheet .center{display:flow-root;block-size:100%;inline-size:100%}
.gcol{display:block;text-align:center}
.gcell{
  display:inline-block;inline-size:1.3em;block-size:1.3em;
  border:1px solid var(--rule);
  text-align:center;line-height:1.3em;
}
.gcol.title{font-size:1.5em;margin-block-start:2.8rem}
.gcol.author{font-size:.86em;margin-block-start:2.2rem;color:var(--ink-soft)}
.gcol.title .gcell{border-color:color-mix(in srgb,var(--rule) 70%,transparent)}
.gcol.author .gcell{border-color:color-mix(in srgb,var(--rule) 45%,transparent)}
.tobira-note{
  display:block;text-align:center;margin-block-start:2rem;
  font-size:.66em;letter-spacing:.3em;color:var(--ink-soft);
}

.oku{display:flow-root;block-size:var(--pageW);padding-block:2.4em}
.oku .rule{display:block;inline-size:100%;border-inline-start:1px solid var(--rule);opacity:.5;margin-inline:1.2em}
.oku{font-size:.82em;line-height:1.95}
.oku .t{font-size:1.4em;letter-spacing:.18em;margin-block-end:1.1em;display:block}
.oku .row{display:block;color:var(--ink-soft);letter-spacing:.06em}
.oku .row b{font-weight:normal;color:var(--ink)}
a{color:var(--ink);text-decoration:none;border-inline-end:1px solid var(--rule);padding-inline-end:.15em}
a:active{color:var(--shiori)}

/* ── 装置 ─────────────────────────────── */
#shiori{
  position:fixed;top:0;right:0;height:2px;background:var(--shiori);
  width:0;opacity:.75;z-index:5;transition:width .34s ease;pointer-events:none;
}
#nobi{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);left:14px;
  font-size:12px;letter-spacing:.18em;color:var(--ink-soft);z-index:5;
  pointer-events:none;font-variant-numeric:normal;
}
#home{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:10px;
  z-index:6;font-size:12px;letter-spacing:.2em;color:var(--ink-soft);
  padding:8px 10px;border:0;border-radius:4px;
  background:var(--paper);box-shadow:0 0 10px 6px var(--paper);
}
#tail{
  position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  text-align:center;z-index:6;font-size:13px;letter-spacing:.16em;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
#tail.on{opacity:1;pointer-events:auto}
#tail a{display:inline-block;margin:0 .9em;padding:6px 2px;border:0;
  border-bottom:1px solid var(--rule);color:var(--ink)}
#hint{
  position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);
  text-align:center;z-index:6;
  font-size:12px;letter-spacing:.24em;color:var(--ink-soft);
  pointer-events:none;opacity:0;transition:opacity 1s ease;
}
#hint.on{opacity:.85}
#stage.ready #flow{animation:sumi .9s ease both}
@keyframes sumi{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}

/* ── 表紙（一頁目） ───────────────────── */
#flow .cover{position:relative}
#flow .cover .dai{display:block;text-align:center;margin-block-start:1.7rem;position:relative;z-index:1}
#flow .cover .daisen{
  display:inline-block;
  border:1px solid var(--ink-soft);
  padding:1.5em .78em;
  font-size:clamp(21px,4.9dvh,31px);letter-spacing:.24em;line-height:1.5;
  background:rgba(255,255,255,.22);
}
@media (prefers-color-scheme: dark){ #flow .cover .daisen{background:rgba(255,255,255,.045)} }
#flow .cover .tori{
  position:absolute;z-index:0;pointer-events:none;
  left:4%;bottom:11%;
  width:44%;height:auto;
}
@media (prefers-color-scheme: dark){
  #flow .cover .tori{filter:brightness(.78) contrast(1.04);opacity:.92}
}

/* ── 目次（流れの中） ─────────────────── */
#flow .mokuji{display:flow-root}
#flow .mk-head{
  display:block;font-size:1.15em;letter-spacing:.5em;color:var(--ink-soft);
  margin-block-start:1.2em;margin-block-end:2.2em;
}
#flow .mkrow{display:block;text-align:start}
#flow .mk{
  display:inline-block;font-size:.86em;line-height:1.88;letter-spacing:.05em;
  border:0;padding:0;white-space:nowrap;
}
#flow .mk .no{font-size:.78em;color:var(--ink-soft)}

/* ── 巻末の初出 ───────────────────────── */
#flow .kanmatsu{display:flow-root;font-size:.86em}
#flow .km-head{
  display:block;font-size:1.2em;letter-spacing:.5em;color:var(--ink-soft);
  margin-block-start:1.2em;margin-block-end:2.2em;
}
#flow .km{display:block;line-height:2.1;letter-spacing:.05em;white-space:nowrap}
#flow .km .hi{font-size:.82em;color:var(--ink-soft)}