/* Supporting portfolio pages: retains shared design tokens and typography. */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--ink);color:var(--paper);padding:10px 18px;z-index:100;border-radius:6px}.skip-link:focus{top:12px}
.page-shell{min-height:70vh;padding:clamp(34px,6vw,70px) 0 82px}.prose{max-width:930px}
.page-head{padding:0 0 clamp(30px,5vw,54px);margin-bottom:26px;border-bottom:1px solid var(--line)}
.page-head h1{font:700 clamp(2.8rem,7vw,5.4rem)/1.03 var(--display);letter-spacing:-.04em;max-width:18ch;margin:12px 0 24px;text-wrap:balance}
.page-lede{font-size:clamp(1.06rem,2vw,1.33rem);line-height:1.55;max-width:70ch;color:var(--ink)}
.article-by{font:400 .8rem var(--mono);margin-top:18px;color:var(--muted)}
.prose section,.project-case{padding:18px 0 24px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.prose h2{font:650 clamp(1.55rem,3.2vw,2.25rem)/1.16 var(--display);letter-spacing:-.03em;margin-bottom:18px}
.prose h3{font:650 clamp(1.17rem,2.2vw,1.4rem)/1.24 var(--display);margin-top:25px;margin-bottom:12px}
.prose p{line-height:1.72;margin:0 0 18px;max-width:78ch}.prose li{line-height:1.65;margin-bottom:10px}
.prose ul,.prose ol{list-style:initial;padding-left:26px;margin:8px 0 24px}.prose ol{list-style:decimal}
.prose a{color:var(--blue-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.prose blockquote{border-left:4px solid var(--pink);padding:14px 20px;margin:24px 0;background:color-mix(in srgb,var(--blue) 6%,var(--surface));border-radius:0 12px 12px 0}
.article-toc{display:flex;flex-wrap:wrap;gap:12px 20px;padding:14px 18px;margin-bottom:28px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.81rem}.article-toc strong{color:var(--muted)}.article-toc a{color:var(--blue-ink)}
.article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.article-list article{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.article-list h2{font-size:clamp(1.25rem,2vw,1.65rem);margin:12px 0}
.page-cta{border:1px solid var(--line)!important;background:var(--surface);border-radius:18px;padding:24px!important;margin-top:32px!important}
.page-button{display:inline-flex;background:var(--ink);color:var(--paper)!important;text-decoration:none!important;border-radius:999px;padding:12px 21px;font:500 .85rem var(--mono)}
.project-case{margin-bottom:30px}.project-case h2{margin:14px 0}
.article-end{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:.91rem}
.responsive-table{max-width:100%;overflow-x:auto;margin:26px 0}.responsive-table table{border-collapse:collapse;min-width:640px;width:100%;font-size:.9rem}.responsive-table th,.responsive-table td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top}.responsive-table th{background:var(--surface)}
.sub-footer{border-top:1px solid var(--line);padding:24px 0 40px;font:400 .77rem var(--mono);color:var(--muted)}.sub-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
@media(max-width:760px){.article-list{grid-template-columns:1fr}.nav{gap:12px}.nav a{font-size:.63rem}.bar .wrap{gap:8px}.mark img{width:42px;height:37px}.page-shell{padding-top:34px}}
@media(max-width:380px){.nav{gap:8px}.nav a{font-size:.57rem}.tog{width:32px;height:32px}}