/* Pen lettering for reading as well as headings. The owner's word drawings stay intact. */
@font-face{font-family:Kalam;src:url('/assets/fonts/kalam-400-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Kalam;src:url('/assets/fonts/kalam-700-latin.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Klee One';src:url('/assets/fonts/klee-one-600-site.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
:root{--notebook-font:Kalam,'Klee One','Apple Symbols','Segoe UI Symbol',cursive}
html body[data-craft-surface],html body[data-craft-surface] *,html body[data-craft-surface] ::before,html body[data-craft-surface] ::after{font-family:var(--notebook-font)!important}
html body[data-craft-surface] .ink-label{font-family:'Kamil Ink',Kalam,cursive!important}
body[data-craft-surface]{font-size:18px;line-height:1.8}
body[data-craft-surface] :is(h1,h2,h3,h4){letter-spacing:0;font-weight:400}
body[data-craft-surface] :is(button,input,select,textarea){font-size:16px}
body[data-craft-surface] :is(header nav,footer,footer button,.reading-index,.reading-index>summary,.reading-index .index-method,.back-link,.card-action,.card-supporting-links a,.work-tech>summary,.work-tech dd,.recognition-list time,.recognition-copy small){font-size:16px}
body[data-craft-surface] :is(.stack-line,.work-tech dt,.eyebrow,.card-category,.card-method,.work-view-control button,.chapter-number,.door-languages button,.trace-control,.sculpture-motion){font-size:14px;letter-spacing:0}
body[data-craft-surface] :is(.card-copy>p:not(.card-category),.about-introduction,.about-facts dd,.recognition-copy,.article-chapter>p,.reading-detail-body,.detail-copy>p,.in-progress p,.article-lead){font-size:19px;line-height:1.8}
html[lang=ja] body[data-craft-surface] :is(.card-copy>p:not(.card-category),.about-introduction,.about-facts dd,.recognition-copy,.article-chapter>p,.reading-detail-body,.detail-copy>p,.in-progress p,.article-lead){font-size:17px;line-height:1.95}
body[data-craft-surface] :is(.languages,.primary-link,.work-view-control button,.pipeline-choice,.demo-controls button,.ci-controls button){border-radius:3px 8px 4px 6px / 6px 3px 7px 3px}
body[data-craft-surface] :is(.intro,.index-heading,.work-card,.about-story,.card-copy){min-width:0}
.portfolio-home .intro{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12%;padding-top:64px;padding-bottom:54px;max-width:1240px;background:none}
.intro h1.handwritten-intro{width:clamp(240px,26vw,345px);margin:0;max-width:100%}
.work-contents{display:flex;flex-direction:column;align-self:center;width:100%;max-width:460px}
.work-contents a{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:67px;padding:12px 2px;color:#29362b;position:relative;isolation:isolate;border:0;font-size:clamp(23px,2.1vw,31px);line-height:1.3}
.work-contents a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#abb6a0;transform:rotate(-.25deg);transform-origin:left}
.work-contents a:nth-child(even):after{transform:rotate(.2deg)}
.work-contents a:before{content:'';position:absolute;inset:10px -13px 8px;z-index:-1;background:#edf0e3;border-radius:48% 12% 42% 17%;opacity:0;transform:scaleX(.9);transition:opacity .22s,transform .35s}
.work-contents a:is(:hover,:focus-visible):before{opacity:1;transform:scaleX(1)}
.work-contents a svg{width:39px;height:28px;flex-shrink:0;transition:transform .3s}
.work-contents a:is(:hover,:focus-visible) svg{transform:translateX(5px) rotate(-4deg)}
.work-contents a:active svg{transform:translateX(8px)}
.work-index .index-heading{padding-top:28px;margin-bottom:24px}
.work-index .index-heading h2{margin:0;font-size:38px}
.portfolio-home .work-index{padding-top:22px}
body[data-craft-surface] .work-tech>dl>div{padding-left:0}
.door-utilities{gap:22px;flex-wrap:wrap}.trace-control{max-width:100%;text-align:left}.sculpture-motion{white-space:nowrap}
@media(max-width:800px){.portfolio-home .intro{gap:8%;padding-block:45px}.work-contents a{font-size:25px;min-height:64px}.intro h1.handwritten-intro{width:260px}}
@media(max-width:600px){.portfolio-home .intro{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:38px 28px}.intro h1.handwritten-intro{width:225px}.work-contents{max-width:none}.work-contents a{font-size:24px;min-height:58px}.work-contents a svg{width:31px}.portfolio-home .work-index{padding-top:18px}.work-view-control{margin-top:0}body[data-craft-surface] header nav:not(.trail-navigation){font-size:14px!important;max-width:100%}body[data-craft-surface] .languages button{font-size:14px}.door-utilities{gap:10px 18px}.door-utilities .trace-control,.door-utilities .sculpture-motion{font-size:13px}.door-languages{gap:14px}.detail-intro h1{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.work-contents a:before,.work-contents a svg{transition:none;transform:none!important}}
html[data-craft-quiet] .work-contents a:before,html[data-craft-quiet] .work-contents a svg{transition:none;transform:none!important}
@media print{.door-utilities{display:none}}

/* On a narrow sheet, the first project stays close to the name and work index. */
@media(max-width:600px){.portfolio-home .intro{gap:17px;padding-block:24px 16px}.intro h1.handwritten-intro{width:175px}.work-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:23px}.work-contents a{font-size:20px;min-height:49px;gap:10px}.work-contents a svg{width:25px}.work-index .index-heading{padding-top:12px;margin-bottom:12px}.portfolio-home .work-index{padding-top:8px}.work-view-control{margin-bottom:20px}.detail-intro .article-start{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 16px;padding-bottom:4px;border-bottom:1px solid #9fa98e;font-size:16px;line-height:1.7}}
.playground-back{display:inline-flex;align-items:center;min-height:44px;margin:22px 0 0;border-bottom:1px solid #aab59c;font-size:16px}.detail-intro .article-start{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 22px;border-bottom:1px solid #aab59c}.work-view-control [hidden]{display:none!important}

.work-index .index-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px}.work-index .index-heading .work-view-control{margin:0;min-width:0;max-width:100%}.work-index .index-heading .work-view-control button{max-width:100%;text-align:left;line-height:1.55}.work-index .index-heading h2{flex-shrink:0}