/* ===== Base / reset ===== */
:root{--ink:#0c0c0c;--paper:#fff;--line:1px solid var(--ink);--solid:var(--line);--double:3px double var(--ink)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:16px/1.12 "Courier New",monospace;letter-spacing:.015em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:fixed;top:-100px;left:15px;background:var(--ink);color:white;padding:8px;z-index:5}
.skip:focus{top:10px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== page layout ===== */

:root{--page-w:min(1180px,calc(100vw - 48px))}
.page{width:var(--page-w);margin:0 auto;padding:34px 0;height:100vh;display:grid;grid-template-columns:minmax(200px,.70fr) minmax(420px,1.22fr);gap:0}
.left{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:24px 34px 24px 24px;display:flex;flex-direction:column;border:1px solid var(--ink)}
.left::-webkit-scrollbar{display:none}

.right{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-left:34px;margin-right:calc((100vw - var(--page-w)) / -2);padding-right:calc((100vw - var(--page-w)) / 2)}

@media(max-width:820px){
  html,body{height:auto}
  :root{--page-w:min(600px,calc(100vw - 30px))}
  .page{height:auto;padding:20px 0 42px;grid-template-columns:1fr;gap:42px}
  .left,.right{height:auto;overflow:visible;padding-right:0}
  .left{padding:18px}
  .right{padding-left:0;padding-top:32px;margin-right:0}
}

/* ===== About / Content (left pane) ===== */
.rule{border-top:var(--line);margin:10px 0}
.section-title{text-align:center;font-size:1.1rem;font-weight:700;letter-spacing:-.04em;margin:0;padding:3px;border-top:var(--double);border-bottom:var(--solid)}
.label{margin:8px 0 16px;font-size:1rem;font-weight:700}
.row+.label{margin-top:24px}
.contents{margin-bottom:30px}
.row{display:grid;grid-template-columns:28px 1fr auto;gap:2px}
.row>span:first-child,.row .page-no{font-weight:700}
.row .indent{grid-column:2;font-weight:400}
.row .week{font-weight:700}
.row .week small{display:block;font-size:.85rem;font-weight:400;margin-top:2px}
.row .page-no{grid-column:3;font-size:1rem}
.total{display:flex;justify-content:space-between;margin-top:30px;border-top:var(--solid);border-bottom:var(--double);padding:10px 0;font-weight:700}

.about-block{margin-bottom:14px;padding:14px 10px}
.about-block h3{font-size:1rem;margin:12px 0 5px;border-bottom:var(--line);font-weight:700}
.entry{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin:12px 10px}
.entry:first-child{margin-top:0}
.entry:last-child{margin-bottom:0}
.entry.affiliation{margin-top:24px}
.affiliation small{margin-top:8px}
.affiliation small+small{margin-top:2px}
.entry>span:first-child{font-weight:700}
.entry small{display:block;font-size:.85rem;font-weight:400}
.role small{font-size:.85rem}

.ascii-photo{display:block;width:480px;max-width:95%;margin:0 auto 18px}
.site-name{margin:-6px 0 4px;text-align:center;font-weight:700;font-size:1.25rem;letter-spacing:.04em}
.site-name a{color:inherit;text-decoration:underline}

.bio{margin-top:70px;text-align:center}
.qr-code{display:block;width:140px;max-width:45%;margin:auto auto 0}
.bio p{max-width:440px;margin:24px auto 0}
.note{text-align:center;border-top:var(--solid);padding-top:10px}

@media(max-width:820px){.bio{margin-top:28px}}
@media(max-width:420px){
  body{font-size:14px}
  .entry{grid-template-columns:1fr}
  .entry>span:last-child{grid-row:1;grid-column:2}
}

/* ===== Identity header (right pane) ===== */
.identity{text-align:center}
.logo{margin:0}
.ascii-logo{display:block;width:100%;overflow:hidden;white-space:pre;font:700 clamp(8px,1.1vw,15px)/1 "Courier New",monospace;letter-spacing:0;text-align:center}
.name,.role{margin:8px 0 2px;font-weight:700;text-align:center}
.name{margin-top:0;font-size:1.1rem}
.name+.role,.left>a+.role{margin-top:2px;margin-bottom:44px}
.contacts{border-top:var(--line);border-bottom:var(--line);padding:10px 0;margin:12px 0}
.receipt-note{margin:18px 0 24px;font-weight:700;text-align:center}
.receipt-note-solo{margin:0 0 28px;border-top:var(--solid);border-bottom:var(--double);padding:14px 0}
.qr-code+.receipt-note-solo{margin:16px 0 0}
.date{display:flex;justify-content:flex-end;border-bottom:var(--line);padding-bottom:6px;margin-bottom:52px}

@media(max-width:820px){
  .identity{border-top:var(--line);padding-top:26px}
  .date{margin-bottom:28px}
  .ascii-logo{font-size:clamp(6px,1.8vw,10px)}
}
@media(max-width:420px){.ascii-logo{font-size:clamp(2.5px,1vw,5px)}}

/* ===== Projects grid (index) ===== */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.project-media{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:repeating-linear-gradient(0deg,#ededed 0,#ededed 3px,#e3e3e3 3px,#e3e3e3 5px);color:#777}
.project-media img{width:100%;height:100%;object-fit:cover}
.caption{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--ink);text-transform:uppercase;font-size:.9rem}
.caption a,.caption span{font-weight:700}

@media(max-width:820px){.projects{grid-template-columns:1fr;gap:28px}}
@media(max-width:420px){.project-media{aspect-ratio:4/3}}

/* ===== Project detail page (right pane content) ===== */
.back{display:inline-block;margin-bottom:22px;font-weight:700}
.p-header{border-top:var(--double);border-bottom:var(--solid);padding:14px 0;margin-bottom:26px}
.week-no{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.p-title{font-size:1.6rem;font-weight:700;margin:6px 0 0;letter-spacing:-.03em}
.meta{display:flex;justify-content:space-between;font-size:.85rem;margin-top:10px}
.hero{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:repeating-linear-gradient(0deg,#ededed 0,#ededed 3px,#e3e3e3 3px,#e3e3e3 5px);color:#777;margin-bottom:36px}
.hero img{width:100%;height:100%;object-fit:cover}
.about-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 28px}
.about-photo{display:block;width:100%;height:auto}
.p-section{margin-bottom:36px}
.p-section > :last-child{margin-bottom:0}
.p-section h2{font-size:1.25rem;text-transform:uppercase;border-bottom:var(--line);border-top:var(--solid);padding-top:6px;padding-bottom:6px;margin:0 0 14px;font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gallery div{aspect-ratio:4/3;background:repeating-linear-gradient(0deg,#ededed 0,#ededed 3px,#e3e3e3 3px,#e3e3e3 5px)}
.p-nav{display:flex;justify-content:space-between;border-top:var(--double);padding-top:14px;font-weight:700}

/* Project images: <div class="image-block"><img><h3>Title</h3><p>Caption</p></div> */
.image-block{margin:0 0 36px}
.image-block img,.image-block video{display:block;width:85%;max-width:85%;height:auto;margin:18px auto}
.image-block img:first-child{margin-top:0}
.image-block img + img{margin-top:-8px}
.p-section h3{font-size:1.1rem;margin:0 0 8px;font-weight:700;line-height:1.2}
.p-section p{margin:0 0 12px;font-size:1rem;line-height:1.5}
.image-block > :last-child{margin-bottom:0}
.p-section p a{text-decoration:underline;text-underline-offset:3px}
.p-section ul{margin:0 0 12px;padding-left:1.6em;list-style:square;line-height:1.5}
.p-section li{margin:0 0 6px}
.p-section li a{text-decoration:underline;text-underline-offset:3px}
.image-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.image-duo{grid-template-columns:1fr}}

/* ===== Code blocks (layout "code", or <pre class="code"><code>…</code></pre> anywhere) ===== */
pre.code{position:relative;margin:0;padding:12px 14px;max-height:360px;overflow:auto;border:1px solid var(--ink);background:#f6f6f6;font:.8rem/1.45 "Courier New",monospace;letter-spacing:0;white-space:pre;tab-size:2}
pre.code[data-lang]::before{content:attr(data-lang);position:sticky;top:-12px;display:block;float:right;margin:-4px -6px 0 8px;font-size:.7rem;text-transform:uppercase;opacity:.6}
pre.code code{font:inherit}

/* Code shown from a .txt file: <div class="code-file"><iframe src="asset/x.txt"></iframe><p class="code-file-links">…</p></div> */
.code-file{width:85%;margin:18px auto}
.code-file:first-child{margin-top:0}
.code-file iframe{color-scheme:light;display:block;width:100%;height:360px;border:1px solid var(--ink);background:#f6f6f6}
.code-file-links{margin:6px 0 0;font-size:.85rem}