/* 両ページ共通：タイプライターで打った一枚の書類。赤リボンは強調のみ */
:root{
  --paper:#ECE6D9;
  --sheet:#F4EFE4;
  --ink:#24211D;
  --ink-soft:#6A6359;
  --rule:#C9C0AF;
  --ribbon:#9A2E26;
  --tape:rgba(226,216,186,.94);
  --grain:.06;
  --f-type:"Special Elite","Courier Prime","Courier New",monospace;
  --f-mono:"Courier Prime","Courier New","Zen Old Mincho",monospace;
  --f-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --s-1:.8125rem; --s0:1rem; --s1:1.2rem; --s2:1.6rem; --s3:clamp(1.6rem,4.5vw,2.4rem); --s4:clamp(2.6rem,8vw,5.25rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1B1916; --sheet:#23201C; --ink:#E6DFD1; --ink-soft:#A39A8B; --rule:#3A352E; --ribbon:#D9776B; --tape:rgba(150,140,112,.9); --grain:.05; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1B1916; --sheet:#23201C; --ink:#E6DFD1; --ink-soft:#A39A8B; --rule:#3A352E; --ribbon:#D9776B; --tape:rgba(150,140,112,.9); --grain:.05; color-scheme:dark}

*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);font-size:var(--s0);line-height:1.9;letter-spacing:.03em;position:relative}
img{max-width:100%}
[hidden]{display:none!important}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ribbon);text-underline-offset:4px}
a:hover{color:var(--ribbon)}
a:focus-visible,button:focus-visible{outline:2px dashed var(--ribbon);outline-offset:3px}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--ink)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand{font-family:var(--f-type);font-size:var(--s0);text-decoration:none;color:var(--ink)}
.brand b{color:var(--ribbon);font-weight:400}
header.top nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
header.top nav a{display:block;padding:4px 10px;font-family:var(--f-mono);font-size:var(--s-1);text-decoration:none;white-space:nowrap;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
header.top nav a:hover{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--ribbon)}
@media (max-width:680px){header.top .wrap{flex-direction:column;align-items:flex-start;gap:2px}header.top nav{width:100%}header.top nav ul{margin-left:-10px}}

.docline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-family:var(--f-mono);font-size:var(--s-1);color:var(--ink-soft);border-bottom:1px dashed var(--rule);padding-bottom:10px;text-transform:uppercase;letter-spacing:.1em}

/* sections */
section.block{border-top:1px solid var(--ink)}
.block-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(20px,5vw,56px)}
@media (max-width:760px){.block-grid{grid-template-columns:1fr}}
.rail .no{font-family:var(--f-mono);font-size:var(--s-1);color:var(--ribbon);letter-spacing:.1em;display:block}
.rail h2{font-family:var(--f-type);font-weight:400;font-size:var(--s2);line-height:1.2;margin:2px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.rail .jp{font-size:var(--s-1);color:var(--ink-soft)}
@media (min-width:761px){.rail{position:sticky;top:84px;align-self:start}}
.sub{font-family:var(--f-mono);font-weight:700;font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase}
.sub:first-child{margin-top:0}
.sub .jp{font-family:var(--f-jp);font-weight:400;letter-spacing:.04em;color:var(--ink-soft);margin-left:8px;text-transform:none}
.tags{display:flex;flex-wrap:wrap;list-style:none;font-family:var(--f-mono);color:var(--ink-soft)}
.tags li::before{content:"#";color:var(--ribbon)}

/* マスキングテープで貼った写真 */
.photo{position:relative;aspect-ratio:16/10;max-width:100%;border:1px solid var(--rule);box-shadow:2px 3px 0 var(--rule);background:#fff;transform:rotate(.8deg)}
.photo .inner{width:100%;height:100%;overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo.logo img{object-fit:contain;padding:12%}
.photo::before,.photo::after{content:"";position:absolute;width:80px;height:24px;top:-11px;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.04)),var(--tape);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.photo::before{left:12px;transform:rotate(-7deg);
  clip-path:polygon(96.8% 0.0%,97.3% 2.9%,95.4% 5.9%,96.0% 8.8%,99.1% 11.8%,99.0% 14.7%,99.0% 17.6%,96.7% 20.6%,98.8% 23.5%,96.6% 26.5%,98.1% 29.4%,97.3% 32.4%,97.0% 35.3%,98.6% 38.2%,97.2% 41.2%,95.8% 44.1%,95.9% 47.1%,95.3% 50.0%,94.7% 52.9%,95.1% 55.9%,96.8% 58.8%,94.9% 61.8%,94.7% 64.7%,93.0% 67.6%,95.6% 70.6%,92.0% 73.5%,92.5% 76.5%,92.1% 79.4%,89.7% 82.4%,91.8% 85.3%,93.1% 88.2%,89.6% 91.2%,88.7% 94.1%,86.6% 97.1%,88.0% 100.0%,1.6% 100.0%,0.6% 97.1%,0.0% 94.1%,5.6% 91.2%,3.6% 88.2%,6.7% 85.3%,6.8% 82.4%,2.3% 79.4%,2.7% 76.5%,5.6% 73.5%,5.2% 70.6%,5.7% 67.6%,7.2% 64.7%,5.8% 61.8%,7.6% 58.8%,8.5% 55.9%,5.9% 52.9%,6.2% 50.0%,6.5% 47.1%,7.1% 44.1%,6.9% 41.2%,7.3% 38.2%,7.5% 35.3%,7.7% 32.4%,10.1% 29.4%,10.1% 26.5%,8.8% 23.5%,9.4% 20.6%,13.2% 17.6%,9.7% 14.7%,10.1% 11.8%,11.1% 8.8%,11.6% 5.9%,9.2% 2.9%,9.7% 0.0%)}
.photo::after{right:12px;transform:rotate(6deg);
  clip-path:polygon(92.1% 0.0%,91.2% 2.9%,90.2% 5.9%,91.1% 8.8%,92.4% 11.8%,93.9% 14.7%,93.3% 17.6%,91.4% 20.6%,91.2% 23.5%,91.5% 26.5%,90.5% 29.4%,91.9% 32.4%,90.6% 35.3%,93.5% 38.2%,92.4% 41.2%,93.7% 44.1%,92.7% 47.1%,91.8% 50.0%,91.6% 52.9%,96.3% 55.9%,97.8% 58.8%,96.7% 61.8%,95.9% 64.7%,98.5% 67.6%,97.4% 70.6%,92.2% 73.5%,96.6% 76.5%,94.7% 79.4%,95.3% 82.4%,97.6% 85.3%,95.6% 88.2%,95.4% 91.2%,95.4% 94.1%,98.4% 97.1%,95.2% 100.0%,8.7% 100.0%,7.6% 97.1%,9.7% 94.1%,8.3% 91.2%,9.7% 88.2%,4.2% 85.3%,4.3% 82.4%,6.0% 79.4%,7.7% 76.5%,11.9% 73.5%,6.6% 70.6%,6.9% 67.6%,8.4% 64.7%,8.5% 61.8%,11.1% 58.8%,12.3% 55.9%,8.7% 52.9%,8.1% 50.0%,12.3% 47.1%,8.8% 44.1%,8.2% 41.2%,10.5% 38.2%,7.2% 35.3%,6.1% 32.4%,6.3% 29.4%,3.9% 26.5%,3.7% 23.5%,2.6% 20.6%,3.1% 17.6%,3.4% 14.7%,3.2% 11.8%,5.8% 8.8%,2.6% 5.9%,4.9% 2.9%,2.5% 0.0%)}

footer{border-top:1px solid var(--ink);padding-block:24px 40px;font-family:var(--f-mono);font-size:var(--s-1);color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

/* タイピング：打つ前の文字は ghost として場所だけ取り、レイアウトを動かさない */
.caret{display:inline-block;width:.08em;height:0;margin-left:.08em;position:relative;animation:blink 1.1s steps(1) infinite}
.caret::before{content:"";position:absolute;left:0;bottom:-.05em;width:100%;height:.85em;background:var(--ribbon)}
@keyframes blink{50%{opacity:0}}
.tw [data-type]:not(.tw-on){visibility:hidden}
.tw-ghost{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* スクロールで見えたときに表示 */
.rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.rv.is-in{opacity:1;transform:none}

/* Lenis（慣性スクロール） */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}