:root{color-scheme:light;--ink:#191919;--sub:#666;--red:#df301e;--line:#e4e4e4}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#fff;color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}a:hover{color:var(--red)}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:6px}::selection{color:#fff;background:var(--red)}.skip{position:fixed;top:-80px;left:20px;background:#fff;padding:12px;z-index:10}.skip:focus{top:10px}header{max-width:1120px;margin:auto;padding:35px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:700 15px Arial,sans-serif;letter-spacing:.08em;text-decoration:none}nav{display:flex;gap:26px;font-size:11px}nav a{text-decoration:none;padding:10px 0}.hero{min-height:650px;min-height:78svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:110px 24px 140px}h1{font-size:clamp(32px,4.9vw,68px);font-weight:700;letter-spacing:.04em;line-height:1.9;margin:0;text-align:center}h1 span{display:block}.hero .byline{margin:36px 0 0;font-size:11px;letter-spacing:.17em;color:var(--sub)}.story{max-width:650px;margin:0 auto;padding:80px 35px 160px}.story p{font-size:15px;line-height:2.4;letter-spacing:.035em;margin:0 0 17px}.story .wide-interests{margin:35px 0}.story .father-words{margin:52px 0}.story .father-words p:last-child{color:var(--sub);margin-top:22px}.story .turning-point{margin-top:52px}.story .decision{font-size:24px;font-weight:700;letter-spacing:.035em;margin-top:22px}.author{font-size:12px;letter-spacing:.08em;margin-top:60px;text-align:right}.projects{max-width:960px;margin:auto;padding:0 40px 130px}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--ink)}h2{font-size:14px;font-weight:500;letter-spacing:.08em;margin:0}.section-heading span{font:11px Arial,sans-serif;color:var(--sub)}.project{display:grid;grid-template-columns:34px minmax(0,1fr);gap:20px;padding:35px 0;border-bottom:1px solid var(--line)}.number{font:11px Arial,sans-serif;color:#616161;padding-top:7px}h3{font-size:19px;font-weight:600;line-height:1.7;letter-spacing:.02em;margin:0 0 10px;overflow-wrap:anywhere}h3 a{text-decoration:none}h3 a:hover{text-decoration:underline}.description{max-width:650px;font-size:13px;color:var(--sub);line-height:2;margin:0}.project-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:15px;font-size:10px;letter-spacing:.03em}.project-links a{padding:6px 0}.footer{max-width:1120px;margin:auto;padding:0 40px 35px}.share-tools{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:25px 0 35px;border-top:1px solid var(--line);font-size:11px}.share-tools button{padding:8px 0;border:0;border-bottom:1px solid #888;background:none;color:var(--ink);font:inherit;cursor:pointer}.share-tools a{padding:8px 0}.share-tools button:hover{color:var(--red)}#share-status{font-size:11px;color:var(--sub);flex-basis:100%;min-height:16px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--sub);font:10px Arial,sans-serif;letter-spacing:.06em}.footer-bottom a{padding:8px 0}.footer-bottom span{padding:8px 0}@media(max-width:600px){header{padding:22px 24px;gap:16px}.brand{font-size:12px}nav{gap:18px;font-size:10px}.hero{min-height:560px;min-height:76svh;padding:100px 20px 110px}h1{font-size:clamp(30px,7.4vw,43px);letter-spacing:.015em;line-height:2}.hero .byline{font-size:10px;margin-top:28px}.story{padding:55px 28px 110px}.story p{font-size:14px;line-height:2.3}.story .decision{font-size:22px}.projects{padding:0 24px 85px}.project{grid-template-columns:23px minmax(0,1fr);gap:12px;padding:28px 0}h3{font-size:17px}.description{font-size:12px;line-height:2}.number{font-size:10px}.section-heading{padding-bottom:20px}.section-heading h2{font-size:13px}.footer{padding:0 24px 28px}.share-tools{gap:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Small details shared by the portfolio and its recovery page. */
:root{--red:#bc2919;--sub:#616161}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{overflow-wrap:break-word}
button,a{-webkit-tap-highlight-color:rgba(188,41,25,.12);touch-action:manipulation}
button{font:inherit}
main:focus{outline:none}
header{padding-top:max(35px,env(safe-area-inset-top));padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
.brand,nav a,.project-links a,.share-tools a,.share-tools button,.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
nav a{position:relative}
nav a[aria-current="location"]::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:2px;background:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}
.hero h1{text-wrap:balance}
.project-filter{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 4px}
.project-filter button{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--sub);font-size:12px;cursor:pointer}
.project-filter button span{margin-left:8px;font:10px Arial,sans-serif;font-variant-numeric:tabular-nums}
.project-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.project-filter button:hover{border-color:var(--ink)}
.project-category{margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:var(--sub)}
.number,#project-count{font-variant-numeric:tabular-nums}
.project-links{margin-top:9px;column-gap:24px;row-gap:0;font-size:12px}
.project-links a:first-child::after{content:"↗";margin-left:8px;font:12px Arial,sans-serif}
.project-links a:first-child{ text-decoration-color:#aaa }
.project:hover h3 a{ text-decoration:underline; text-decoration-color:#aaa }
.project-links a:hover{ text-decoration-color:currentColor }
.description{color:var(--sub)}
.share-tools{gap:8px 24px}
.share-tools button{border-bottom-color:#888}
.share-tools button:disabled{cursor:progress;opacity:.65}
#share-status{line-height:1.8;min-height:20px}
.footer{padding-bottom:max(35px,env(safe-area-inset-bottom))}
.error-main{max-width:720px;margin:0 auto;padding:90px 40px 120px;min-height:65svh}
.error-code{color:var(--red);font:12px Arial,sans-serif;letter-spacing:.14em}
.error-main h1{text-align:left;font-size:clamp(26px,5vw,44px);line-height:1.6;margin:24px 0}
.error-main p{font-size:14px;line-height:2;color:var(--sub)}
.error-links{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:32px}
.error-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
@media(hover:hover){.brand:hover{color:var(--red)}}
@media(max-width:600px){header{padding-top:max(22px,env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}nav{font-size:11px;gap:16px}.project-filter{gap:6px;margin-top:20px}.project-filter button{font-size:11px;padding:9px 11px}.project-category{margin-bottom:5px}.description{font-size:13px}.footer-bottom{font-size:11px}.footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}.error-main{padding:65px 24px 90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(forced-colors:active){.project-filter button[aria-pressed="true"]{background:Highlight;color:HighlightText;border:2px solid Highlight}.project-filter button{border-color:ButtonText}a:focus-visible,button:focus-visible{outline-color:Highlight}nav a[aria-current="location"]::after{background:LinkText}}
@media print{html{scroll-behavior:auto}body{color:#000;background:#fff;font-size:10pt}header{padding:0 0 12pt}.skip,nav,.project-filter,.share-tools,.footer-bottom a{display:none!important}.hero{min-height:0;padding:25pt 0 30pt}h1{font-size:28pt;line-height:1.5}.hero .byline{margin-top:12pt}.story{padding:20pt 0 30pt;max-width:none}.story p{font-size:10pt;line-height:1.7;margin-bottom:6pt}.story .father-words{margin:18pt 0}.story .turning-point{margin-top:18pt}.story .decision{font-size:16pt}.author{margin-top:18pt}.projects{padding:0;max-width:none}.project{break-inside:avoid;padding:14pt 0;gap:12pt}.project[hidden]{display:grid!important}.project-category{margin-bottom:3pt}h3{font-size:13pt}.description{font-size:10pt;color:#333;line-height:1.7}.project-links{margin-top:4pt;font-size:9pt}.project-links a{min-height:0}.project-links a:first-child::after{content:"  https://djnaoyaman.github.io" attr(href);font-size:8pt;margin-left:4pt}.project-links a:last-child{display:none}.footer{padding:20pt 0 0}.footer-bottom{font-size:8pt}a{text-decoration:none}#project-count{font-size:0}#project-count::after{content:"全12サイト";font:9pt Arial,sans-serif}}

/* Brand punctuation, intrinsic wrapping and opt-in text-spacing resilience. */
.brand-dot{color:inherit}
header{flex-wrap:wrap}
nav{flex-wrap:wrap}
.project:focus-within h3 a{text-decoration:underline;text-decoration-color:var(--red)}
#share-status{overflow-wrap:anywhere}
.error-main h1{overflow-wrap:normal}
@media print{.brand-dot{color:#000}}

/* Writing and public profiles share the portfolio's quiet typography. */
.activities{max-width:960px;margin:auto;padding:0 40px 100px}.activity{padding:32px 0;border-bottom:1px solid var(--line)}.activity-description,.reading-list{max-width:700px;font-size:13px;line-height:2;color:var(--sub)}.activity-description{margin:0}.reading-list{padding-left:1.4em;margin:18px 0 0}.reading-list li{margin:10px 0}.reading-list strong{font-weight:600;color:var(--ink)}.activity-links{margin-top:14px;font-size:12px}.activity-links a,.social-links a{min-height:44px;display:inline-flex;align-items:center}.social-links{display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:24px;font-size:13px}.social-links a{flex-wrap:wrap;gap:6px 14px}.social-links span{font-size:11px;color:var(--sub);overflow-wrap:anywhere}
@media(max-width:600px){.activities{padding:0 24px 70px}.activity{padding:26px 0}.social-links{gap:8px 24px}nav{gap:8px 16px}}
@media print{.activities{max-width:none;padding:20pt 0}.activity{padding:14pt 0;break-inside:avoid}.activity-description,.reading-list{font-size:10pt;color:#333}.activity-links a,.social-links a{min-height:0}}

.profile-teaser{margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}.story .profile-teaser p{font-size:13px;line-height:2;margin:0 0 10px;color:var(--sub)}.profile-teaser a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--ink)}