:root{
  --water:#0d1216;
  --water2:#121a20;
  --water3:#0a0e11;
  --paper:#e7e0cf;
  --paper-letter:#ece4cf;
  --paper-note:#e3ddca;
  --paper-news:#ddd6c2;
  --paper-ledger:#e9e3d1;
  --ink:#22282c;
  --ink-soft:#4a5157;
  --ink-faint:#6d726f;
  --rule:#c7bda2;
  --rule-soft:#d3caae;
  --cinnabar:#9a3529;
  --cinnabar-soft:#b25547;
  --teal:#68b3ac;
  --teal-dim:#2c4744;
  --teal-line:#20302f;
  --narr:#c9cabd;
  --narr-dim:#828879;
  --hair:#3a4038;
  --gold:#8f8360;
  --serif:'Noto Serif JP', serif;
  --display:'Shippori Mincho', serif;
  --mono: ui-monospace, 'Roboto Mono', 'Noto Sans JP', monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #16202700 40%, #05080a 100%),
    linear-gradient(180deg,#0f171d 0%, var(--water) 45%, var(--water3) 100%);
  color:var(--narr);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}

.page{ max-width:44rem; margin:0 auto; padding:0 1.25rem 4rem; }

/* ===== article header ===== */
header.art{ max-width:44rem; margin:0 auto; padding:2.6rem 1.25rem 0; }
.meta-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.cat{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-indent:.2em;
  color:var(--teal); border:1px solid var(--teal-line);
  padding:.28rem .7rem; border-radius:2px; background:rgba(104,179,172,.05); white-space:nowrap;
}
.meta-row .date{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--narr-dim); }
.meta-row .ep{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--teal); }
.meta-row .brand{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; color:var(--narr-dim); margin-left:auto; }

h1.headline{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.75rem,5.4vw,2.55rem);
  line-height:1.42; letter-spacing:.02em; margin:0; color:#eef0e6; text-shadow:0 1px 0 #000;
}
h1.headline.cont{ font-size:clamp(1.3rem,4.2vw,1.72rem); line-height:1.4; }
h1.headline .tail{
  display:block; margin-top:1rem;
  font-size:clamp(1.02rem,3vw,1.26rem); font-weight:600; line-height:1.7; letter-spacing:.02em; color:#c4c8bd;
}
.lead{
  margin:1.9rem 0 0; padding:1.15rem 1.2rem; border-left:3px solid var(--gold);
  background:rgba(255,255,255,.015);
  font-size:.92rem; line-height:1.95; color:#b7bcae; letter-spacing:.02em;
}
.byline{ margin:1.4rem 0 0; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--narr-dim); }

/* ===== recap (前回までのあらすじ) ===== */
.recap{ margin:0; padding:1rem 1.2rem; border:1px solid var(--hair); border-radius:3px; background:rgba(255,255,255,.012); }
.recap .rh{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-indent:.24em; color:var(--teal); margin-bottom:.55rem; }
.recap p{ margin:0; font-size:.85rem; line-height:1.9; color:var(--narr-dim); letter-spacing:.02em; }

/* ===== 連載目次 (toc) ===== */
.toc{ margin:2.8rem 0 0; padding:1.2rem 1.35rem; border:1px solid var(--hair); border-radius:3px; background:rgba(104,179,172,.02); }
.toc .th{ font-family:var(--display); font-weight:600; font-size:.86rem; letter-spacing:.1em; color:var(--teal); margin:0 0 .6rem; }
.toc ol{ list-style:none; margin:0; padding:0; }
.toc li{ border-top:1px solid var(--teal-line); }
.toc li:first-child{ border-top:0; }
.toc a, .toc .cur{ display:flex; gap:.9rem; align-items:baseline; padding:.62rem .1rem; font-size:.9rem; line-height:1.6; }
.toc a{ text-decoration:none; color:var(--narr); transition:color .2s; }
.toc a:hover{ color:#eef0e6; }
.toc a:hover .lbl{ color:#c9cabd; }
.toc .cur{ color:#eef0e6; }
.toc .n{ font-family:var(--mono); font-size:.72rem; color:var(--teal); letter-spacing:.06em; white-space:nowrap; min-width:3.4em; }
.toc .cur .n{ color:#e0ac9f; }
.toc .lbl{ color:var(--narr-dim); }
.toc .cur .lbl{ color:var(--narr); }
.toc--top{ margin-bottom:2.6rem; }

/* ===== hero ===== */
.hero{ max-width:44rem; margin:2rem auto 0; padding:0 1.25rem; }
.hero .frame{
  position:relative; border:1px solid var(--hair); border-radius:3px; overflow:hidden;
  box-shadow:0 24px 48px -30px #000, 0 0 0 1px rgba(104,179,172,.05) inset;
  aspect-ratio:16/9;
}
.hero svg{ display:block; width:100%; height:100%; }
.hero-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero .cap{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; line-height:1.7;
  color:var(--narr-dim); margin:.7rem .1rem 0; text-align:right;
}

/* ===== body wrap ===== */
.body{ padding-top:2.4rem; }
.sep{ text-align:center; color:var(--narr-dim); letter-spacing:.5em; margin:2.6rem 0; font-size:.9rem; opacity:.7; }

/* ===== narration / 手記 ===== */
.narration{ padding:.4rem .2rem; }
.narration p{ margin:0 0 1.3rem; color:var(--narr); }
.narration p:last-child{ margin-bottom:0; }
.narration p.first::first-letter{
  font-family:var(--display); font-weight:700; font-size:2.7em; float:left;
  line-height:.86; padding:.05em .12em 0 0; color:#e7e9df;
}
.narration h2{
  font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:.05em; line-height:1.5;
  color:#e7e9df; margin:2.9rem 0 1.4rem; padding-top:1.7rem; border-top:1px solid var(--hair);
}
.narration strong{ color:#eceee4; font-weight:700; }
.narration p.reveal{ font-size:1.06rem; }

/* viewer comments / チャット */
.comments{
  margin:1.7rem 0; padding:1rem 1.2rem; border:1px solid var(--hair);
  border-left:3px solid var(--teal-dim); background:rgba(255,255,255,.012); border-radius:2px;
}
.comments p{ margin:0 0 .7rem; font-size:.85rem; line-height:1.85; color:#a9aea1; letter-spacing:.01em; }
.comments p:last-child{ margin-bottom:0; }
.comments p::before{ content:"›"; color:var(--teal); margin-right:.55rem; opacity:.7; }

/* ===== exhibits (資料) ===== */
.exhibit{
  position:relative; margin:2.2rem 0; background:var(--paper); color:var(--ink); border-radius:2px;
  padding:2.2rem 1.9rem 2rem;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 22px 40px -26px #000, 0 4px 14px -8px rgba(0,0,0,.6);
  font-size:.94rem; line-height:1.9;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0) 8%),
    radial-gradient(140% 100% at 100% 0%, rgba(120,90,40,.08), transparent 55%);
}
.exhibit::after{
  content:""; position:absolute; inset:0; border-radius:2px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(80,60,20,.12) inset;
  background:linear-gradient(180deg,transparent 88%, rgba(40,55,60,.10) 100%);
}
.ex-tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.34em; text-indent:.34em; color:var(--cinnabar); margin-bottom:.5rem; }
.ex-title{
  font-family:var(--display); font-weight:700; font-size:1.24rem; letter-spacing:.06em; line-height:1.4;
  color:#1b2024; margin:0 0 1.3rem; padding-bottom:.9rem; border-bottom:1px solid var(--rule);
}
.exhibit .memo{
  font-family:var(--mono); font-size:.72rem; line-height:1.75; color:var(--ink-faint);
  margin:-.4rem 0 1.3rem; letter-spacing:.02em;
}
.exhibit p{ margin:0 0 1.05rem; }
.exhibit p:last-child{ margin-bottom:0; }
.exhibit h4{
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.05em; margin:1.6rem 0 .9rem; color:#1f262b;
}
.subrule{ height:1px; background:var(--rule); border:0; margin:1.6rem 0; }

/* form (役所綴) */
.exhibit--form{ background:var(--paper); }
.stamp{
  position:absolute; top:1.5rem; right:1.6rem; width:64px; height:64px; border-radius:50%;
  border:2.5px solid var(--cinnabar-soft); color:var(--cinnabar); opacity:.72;
  display:grid; place-items:center; transform:rotate(-11deg);
  font-family:var(--display); font-weight:700; letter-spacing:.12em; font-size:.86rem; line-height:1.2; text-align:center;
  box-shadow:0 0 0 4px rgba(154,53,41,.06);
}
.doc-h{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:.14em; text-align:center; color:#1f262b; margin:.2rem 0 1.2rem; }
table.form{ width:100%; border-collapse:collapse; font-size:.9rem; margin:0 0 1.1rem; }
table.form th, table.form td{ text-align:left; vertical-align:top; padding:.5rem .2rem; border-bottom:1px dotted var(--rule); }
table.form th{ width:11.5em; font-weight:500; color:var(--ink-soft); font-size:.82rem; letter-spacing:.04em; white-space:nowrap; }
table.form td{ color:var(--ink); }
.field-block{ margin:0 0 .5rem; }
.field-block .lab{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:.15rem; }

/* letter (書簡) */
.exhibit--letter{ background:var(--paper-letter); }
.exhibit--letter .letter{ margin:0 0 1.9rem; }
.exhibit--letter .letter:last-child{ margin-bottom:0; }
.exhibit--letter .to{ font-weight:600; margin-bottom:.7rem; }
.exhibit--letter .close{ text-align:right; color:var(--ink-soft); }
.letter-src{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--cinnabar); margin:1.4rem 0 .7rem; }

/* folk note (民俗聞き書き) */
.exhibit--note{ background:var(--paper-note); }

/* newspaper (地方紙) */
.exhibit--news{ background:var(--paper-news); }
.exhibit--news .ex-title{ font-weight:700; letter-spacing:.02em; }
.news-rule{ border:0; border-top:3px double var(--ink-soft); margin:.2rem 0 1.3rem; }

/* ledger (家計簿) */
.exhibit--ledger{
  background:
    repeating-linear-gradient(180deg, transparent, transparent 2.38rem, rgba(120,90,40,.14) 2.38rem, rgba(120,90,40,.14) calc(2.38rem + 1px)),
    var(--paper-ledger);
}
.ledger-row{ margin:0 0 1.35rem; }
.ledger-date{
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.06em; color:#26170f;
  margin-bottom:.2rem; display:flex; align-items:baseline; gap:.8rem;
}
.ledger-date .weather{ font-size:.78rem; color:var(--ink-faint); font-family:var(--serif); letter-spacing:.06em; }
.ledger-row p{ margin:0; }
.ledger-row .goods{ color:var(--ink-soft); font-size:.86rem; }

/* data export (携帯) */
.exhibit--data{
  background:var(--water3); color:#b6c4c0; border-radius:3px; border:1px solid var(--teal-line);
  box-shadow:0 22px 44px -26px #000, 0 0 0 1px rgba(104,179,172,.06) inset;
  background-image:none; font-family:var(--mono);
}
.exhibit--data::after{ display:none; }
.exhibit--data .ex-tag{ color:var(--teal); }
.exhibit--data .ex-title{
  font-family:var(--mono); font-weight:700; color:#dfeae7; font-size:1.02rem; letter-spacing:.05em; border-bottom:1px solid var(--teal-line);
}
.exhibit--data .memo{ color:#66817c; }
.data-h{
  color:var(--teal); font-size:.74rem; letter-spacing:.28em; text-indent:.28em;
  margin:1.7rem 0 .8rem; padding-bottom:.4rem; border-bottom:1px dashed var(--teal-line);
}
ul.phonebook{ list-style:none; margin:0 0 .6rem; padding:0; font-size:.82rem; line-height:1.9; }
ul.phonebook li{ display:flex; gap:1.1rem; color:#9fb2ad; }
ul.phonebook li .idx{ color:#5f7a75; }
table.log{ width:100%; border-collapse:collapse; font-size:.78rem; margin:.2rem 0 .6rem; }
table.log caption{ caption-side:bottom; text-align:left; color:#66817c; font-size:.72rem; line-height:1.7; padding-top:.7rem; letter-spacing:.02em; }
table.log th{ text-align:left; font-weight:700; color:var(--teal); border-bottom:1px solid var(--teal-dim); padding:.4rem .6rem; letter-spacing:.06em; font-size:.72rem; }
table.log td{ padding:.34rem .6rem; border-bottom:1px solid var(--teal-line); color:#b6c4c0; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.log tr.ring td{ color:#d6bcb6; }
table.log tr.ring td.who{ color:var(--cinnabar-soft); font-weight:700; }
table.log .status{ color:#7f938e; }
.log-gap td{ text-align:center; color:#4f6560; letter-spacing:.3em; padding:.3rem; }
.settings{ font-size:.78rem; line-height:1.95; color:#9fb2ad; margin:.4rem 0 0; }
.settings b{ color:var(--teal); font-weight:700; }

/* ===== pager ===== */
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--hair);
}
.pager.top{ margin-top:1.4rem; padding:0 0 1.4rem; border-top:0; border-bottom:1px solid var(--hair); }
.pager .pno{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--narr-dim); }
a.next, a.prev{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-weight:600; font-size:.94rem; letter-spacing:.14em;
  color:#dbeae6; text-decoration:none; border:1px solid var(--teal-dim); background:rgba(104,179,172,.06);
  padding:.85rem 1.5rem; border-radius:3px; transition:background .2s, border-color .2s;
}
a.next:hover, a.prev:hover{ background:rgba(104,179,172,.13); border-color:var(--teal); }
a.prev{ color:var(--narr-dim); }
a.next .arw, a.prev .arw{ color:var(--teal); font-family:var(--mono); }

/* ===== end notice / footer ===== */
.endnote{
  margin:3rem 0 0; padding:.9rem 1.1rem; color:var(--narr-dim);
  font-size:.74rem; line-height:1.85; letter-spacing:.04em;
  border:1px solid var(--hair); border-left:3px solid var(--cinnabar); background:rgba(255,255,255,.015);
}

/* 分割記事用（偽の結末の署名＋中央寄せの続きリンク） */
.pager--solo{ justify-content:center; }
.signoff{ margin:2.9rem 0 0; padding-top:1.7rem; border-top:1px solid var(--hair); text-align:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--narr-dim); }
footer.foot{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--hair); text-align:center; }
footer.foot p{ font-size:.7rem; color:var(--narr-dim); line-height:1.9; letter-spacing:.03em; margin:.2rem 0; }

section{ scroll-margin-top:1rem; }

/* ===== site nav bar ===== */
.site-nav{ position:sticky; top:0; z-index:20; background:rgba(8,12,15,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
.nav-inner{ max-width:44rem; margin:0 auto; padding:.9rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.nav-brand{ font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.08em; color:#eef0e6; text-decoration:none; }
.nav-brand:hover{ color:#fff; }
.nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:28px; padding:0; background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; height:1.5px; width:22px; margin-left:auto; background:var(--narr); transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-menu{ background:rgba(6,9,12,.98); border-top:1px solid var(--teal-line); }
.nav-menu[hidden]{ display:none; }
.nav-menu-inner{ flex-direction:column; align-items:stretch; padding-top:.2rem; padding-bottom:.8rem; }
.nav-menu a{ padding:.75rem .2rem; color:var(--narr); text-decoration:none; font-size:.9rem; letter-spacing:.06em; border-top:1px solid var(--teal-line); }
.nav-menu a:first-child{ border-top:0; }
.nav-menu a:hover{ color:var(--teal); }

/* ===== top page (index) ===== */
.feed-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; text-indent:.3em; color:var(--teal); margin:2.8rem 0 1.6rem; }

.card{ display:flex; gap:1.3rem; text-decoration:none; color:inherit; margin:0 0 1.5rem; padding:1rem; border:1px solid var(--hair); border-radius:4px; background:rgba(255,255,255,.012); transition:border-color .2s, background .2s, transform .2s; }
.card:hover{ border-color:var(--teal-dim); background:rgba(104,179,172,.03); transform:translateY(-2px); }
.card-thumb{ flex:0 0 38%; align-self:flex-start; aspect-ratio:16/9; border-radius:3px; overflow:hidden; border:1px solid var(--hair); background:#05080a; }
.card-thumb svg{ display:block; width:100%; height:100%; }
.card-thumb-img{ display:block; width:100%; height:100%; object-fit:contain; }
.card-body{ flex:1; min-width:0; padding:.3rem .3rem .3rem 0; }
.card-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.7rem; }
.card-meta .date{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--narr-dim); }
.badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--gold); border:1px solid rgba(143,131,96,.4); border-radius:2px; padding:.16rem .5rem; }
.card-title{ font-family:var(--display); font-weight:700; font-size:1.06rem; line-height:1.5; letter-spacing:.02em; color:#e7e9df; margin:0 0 .6rem; }
.card:hover .card-title{ color:#fff; }
.card-excerpt{ font-size:.82rem; line-height:1.8; color:var(--narr-dim); margin:0; }

.site-foot{ max-width:44rem; margin:3.5rem auto 0; padding:2rem 1.25rem 4rem; border-top:1px solid var(--hair); text-align:center; }
.site-foot .foot-note{ font-size:.72rem; line-height:1.9; color:var(--narr-dim); letter-spacing:.02em; margin:0 0 1.2rem; }
.foot-links{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; margin-bottom:1rem; }
.foot-links a{ color:var(--narr-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--teal); }
.foot-copy{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:#586058; margin:0; }

/* ===== info / doc pages (about, privacy, contact) ===== */
.pagetitle{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,5vw,1.95rem); letter-spacing:.04em; color:#eef0e6; margin:2.8rem 0 .5rem; }
.pagelead{ margin:0 0 2rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-indent:.24em; color:var(--narr-dim); }
.doc p{ margin:0 0 1.2rem; color:var(--narr); }
.doc h2{ font-family:var(--display); font-weight:700; font-size:1.08rem; letter-spacing:.04em; color:#e7e9df; margin:2.4rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--hair); }
.doc a{ color:var(--teal); }
.doc ul{ margin:0 0 1.2rem; padding-left:1.3em; color:var(--narr); }
.doc li{ margin:.35rem 0; }
.doc .small{ font-size:.8rem; color:var(--narr-dim); }
.info-list{ margin:0 0 1.6rem; }
.info-list dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--teal); margin-top:1.2rem; }
.info-list dd{ margin:.3rem 0 0; color:var(--narr); }
.contact-embed{ margin:1.2rem 0 0; border:1px solid var(--hair); border-radius:4px; overflow:hidden; background:#f7f4ec; }
.contact-embed iframe{ display:block; width:100%; border:0; }

@media (max-width:520px){
  .card{ flex-direction:column; gap:1rem; }
  .card-thumb{ flex-basis:auto; }
}

@media (max-width:520px){
  .exhibit{ padding:1.8rem 1.25rem 1.6rem; }
  .stamp{ width:54px; height:54px; font-size:.74rem; top:1.2rem; right:1.1rem; }
  table.form th{ width:auto; white-space:normal; }
  table.form, table.form tbody, table.form tr, table.form th, table.form td{ display:block; }
  table.form th{ padding-bottom:0; border:0; }
  table.form td{ padding-top:.15rem; padding-bottom:.7rem; }
  .pager{ flex-direction:column; gap:.8rem; align-items:stretch; }
  a.next, a.prev{ justify-content:center; }
  .pager .pno{ text-align:center; order:-1; }
}

@media (prefers-reduced-motion: no-preference){
  .exhibit, .narration{ animation:rise .7s ease both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

  .ripar{ transform-box:fill-box; transform-origin:center; opacity:0; animation:rip 6.5s ease-out infinite; }
  .ripar.d2{ animation-delay:2.2s; }
  .ripar.d3{ animation-delay:4.4s; }
  @keyframes rip{ 0%{ transform:scale(.1); opacity:0; } 12%{ opacity:.5; } 70%{ opacity:.1; } 100%{ transform:scale(1.12); opacity:0; } }

  .glowpulse{ animation:gp 9s ease-in-out infinite; }
  @keyframes gp{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }

  .fogA{ animation:driftA 30s ease-in-out infinite alternate; }
  .fogB{ animation:driftB 46s ease-in-out infinite alternate; }
  @keyframes driftA{ from{ transform:translateX(-30px);} to{ transform:translateX(28px);} }
  @keyframes driftB{ from{ transform:translateX(26px);} to{ transform:translateX(-24px);} }
}