@font-face { font-family:"Paper Pixel"; src:url("assets/fonts/Jersey10-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; padding:24px; color:var(--ink); background:var(--desk); background-image:linear-gradient(#ffffff5c 1px,transparent 1px),linear-gradient(90deg,#ffffff5c 1px,transparent 1px); background-size:64px 64px; font:16px/1.75 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure,dl,dd { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
p,h1,h2,h3,a,dd,dt { overflow-wrap:anywhere; text-wrap:pretty; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-100px; left:24px; padding:12px 24px; z-index:100; background:var(--yellow); }
.skip-link:focus { top:12px; }
.notebook-sheet { width:min(1360px,100%); margin:auto; border:1px solid var(--line); background-color:var(--canvas); background-image:repeating-linear-gradient(transparent 0 27px,var(--paper-rule) 27px 28px); box-shadow:0 7px 30px #29291d14; }
.wrap { width:min(1080px,calc(100% - 96px)); margin-inline:auto; }
.header { min-height:66px; padding:8px 28px; display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; }
.brand-en { font-size:11px; font-weight:400; color:var(--secondary); }
.stamp { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--pink); font-size:23px; line-height:1; }
.avatar { width:32px; height:32px; object-fit:cover; border-radius:50%; }
nav { display:flex; align-items:center; gap:4px; margin-right:auto; }
nav a { display:flex; align-items:center; min-height:44px; padding:7px 14px; font-size:12px; }
nav a:first-child { background:var(--yellow); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
nav a:hover,.header-email:hover { background:var(--cream); }
.header-email { border:1px solid var(--ink); padding:7px 16px; font-size:12px; min-height:44px; display:flex; align-items:center; }
.intro { padding-block:54px 64px; }
.hero-collage { position:relative; min-height:320px; }
.hero-copy { position:relative; z-index:2; max-width:660px; margin:auto; text-align:center; }
.eyebrow { font-size:13px; }
.eyebrow span { margin-left:8px; font:17px var(--hand); }
h1 { margin-top:18px; line-height:1; }
.nameplate { display:inline-block; position:relative; max-width:100%; padding:10px 24px 15px; border:1px solid var(--frame-line); transform:rotate(-1.5deg); font:400 clamp(80px,14vw,188px)/.82 var(--display); letter-spacing:.005em; }
.nameplate.long { font-size:clamp(40px,7vw,90px); line-height:1.1; }
.handle { position:absolute; width:5px; height:5px; background:var(--frame-line); border:1px solid var(--canvas); }
.tl { top:-3px; left:-3px; }.tr { top:-3px; right:-3px; }.bl { bottom:-3px; left:-3px; }.br { bottom:-3px; right:-3px; }
.hero-labels { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:12px; }
.hero-labels span { padding:5px 12px; background:var(--yellow); font-size:12px; transform:rotate(-2deg); box-shadow:2px 5px 0 #3431260b; }
.hero-labels span+span { background:var(--mint); transform:rotate(2deg); font-family:var(--mono); }
.lead { max-width:580px; margin:24px auto 0; font-size:17px; line-height:1.8; white-space:pre-line; }
.browse { display:inline-flex; align-items:center; gap:9px; margin-top:21px; min-height:44px; padding:6px 14px 6px 7px; font-size:12px; background:var(--ink); color:var(--surface); border:1px solid var(--ink); box-shadow:3px 3px 0 var(--lilac); transition:transform .18s var(--ease); }
.browse span { display:grid; place-items:center; width:25px; height:25px; background:var(--lilac); color:var(--ink); font-size:20px; }
.browse:hover { transform:translate(-2px,-2px); }
.snapshot { position:absolute; top:28px; left:0; width:150px; padding:9px 9px 5px; background:var(--surface); border:1px solid var(--line); box-shadow:0 4px 9px #24241b24; transform:rotate(-8deg); }
.snapshot::before,.contact::before { content:""; position:absolute; top:-10px; left:calc(50% - 25px); width:50px; height:20px; background:var(--tape); transform:rotate(-12deg); z-index:1; }
.snapshot img { width:100%; height:148px; object-fit:cover; }
.snapshot figcaption { padding:7px 0 2px; text-align:center; font:14px/1.2 var(--hand); color:var(--secondary); }
.snapshot-right { left:auto; right:0; top:48px; width:164px; transform:rotate(7deg); }
.snapshot-right img { height:136px; }
.work { padding-bottom:72px; --sticky-top:28px; --heading-height:120px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; padding-bottom:18px; }
.handwritten { font:17px/1.3 var(--hand); color:var(--secondary); margin-bottom:8px; }
.section-heading h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; line-height:1; }
.pixel { font:400 clamp(45px,6.4vw,80px)/.88 var(--display); letter-spacing:-.025em; }
.section-label { font:500 15px/1.5 var(--body); }
.work-count { font-size:12px; color:var(--secondary); flex-shrink:0; }
.stack { list-style:none; padding:0; margin:0; position:relative; isolation:isolate; }
.stack-item { position:relative; z-index:var(--layer); min-width:0; pointer-events:none; }
.stack-item+.stack-item { margin-top:32px; }
.folder { position:relative; padding-top:44px; color:var(--folder-ink); pointer-events:none; }
.tone-ink { --folder-color:var(--ink); --folder-ink:var(--surface); }
.tone-yellow { --folder-color:var(--yellow); --folder-ink:var(--ink); }
.tone-blue { --folder-color:var(--blue); --folder-ink:var(--surface); }
.tone-mint { --folder-color:var(--mint); --folder-ink:var(--ink); }
.tone-lilac { --folder-color:var(--lilac); --folder-ink:var(--ink); }
.tone-pink { --folder-color:var(--pink); --folder-ink:var(--ink); }
.tone-cream { --folder-color:var(--cream); --folder-ink:var(--ink); }
.project-tab { position:absolute; top:0; left:0; width:170px; min-height:45px; padding:0 10px; display:flex; justify-content:center; align-items:center; border:0; background:var(--folder-color); color:var(--folder-ink); clip-path:polygon(0 100%,16px 0,calc(100% - 16px) 0,100% 100%); font:11px/1.4 var(--mono); letter-spacing:.06em; pointer-events:auto; }
.project-tab:hover,.project-tab[aria-pressed="true"] { text-decoration:underline; text-underline-offset:4px; }
.project-tab:focus-visible { outline:2px solid currentColor; outline-offset:-7px; }
.project-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); align-items:center; gap:36px; min-height:430px; padding:36px 40px 44px; background:var(--folder-color); color:var(--folder-ink); pointer-events:auto; }
.project-panel.no-cover { grid-template-columns:minmax(0,1fr); min-height:300px; }
.project-copy { min-width:0; }
.project-index { font:10px/1.6 var(--mono); letter-spacing:.06em; }
.project-copy h3 { margin-top:18px; font-size:clamp(26px,2.7vw,38px); line-height:1.35; letter-spacing:-.045em; }
.project-summary { max-width:42em; margin-top:14px; font-size:14px; line-height:1.9; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.project-tags span { background:var(--cream); color:var(--ink); font-size:11px; padding:3px 8px; }
.project-tags span:nth-child(2) { background:var(--lilac); }
.project-tags span:nth-child(3) { background:var(--mint); }
.project-open { display:flex; justify-content:space-between; gap:24px; align-items:center; min-height:52px; width:min(100%,240px); margin-top:24px; padding:12px 14px; border-bottom:1px solid currentColor; font-size:13px; }
.project-open:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
.project-open:focus-visible { outline-color:currentColor; }
.concept { font:11px/1.6 var(--mono); margin-top:24px; opacity:.8; }
.cover { width:100%; height:350px; object-fit:contain; transition:transform .24s var(--ease); }
.folder:hover .cover { transform:scale(1.02); }
.stacked .stack { display:grid; grid-template-columns:minmax(0,1fr); row-gap:clamp(180px,30svh,300px); }
.stacked .stack-item { position:sticky; top:calc(var(--sticky-top) + var(--heading-height) + 24px); }
.stacked .stack-item:first-child { top:var(--sticky-top); }
.stacked .stack-item+.stack-item { margin-top:-44px; }
.stacked .section-heading { background-color:var(--canvas); background-image:repeating-linear-gradient(transparent 0 27px,var(--paper-rule) 27px 28px); }
.stacked .project-tab { left:calc(var(--index)*100%/var(--count)); width:calc(100%/var(--count)); }
.stacked .stack-item:first-child .project-tab { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%); }
.stack-item.is-selected,.stack-item:has(.project-open:focus-visible) { z-index:20; }
.about { padding-block:30px 64px; }
.about .section-heading { border-top:1px solid var(--line); padding-top:36px; margin-bottom:36px; }
.about-columns { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:72px; align-items:start; }
.about-text { padding:22px 24px; border:1px solid var(--yellow); background:var(--surface); transform:rotate(-.5deg); font-size:15px; line-height:1.9; box-shadow:2px 5px 0 #3431260b; }
.experience { margin-top:26px; }
.experience>div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px; margin-top:16px; font-size:13px; }
.experience dt { align-self:start; padding:2px 8px; background:var(--yellow); width:fit-content; font-size:12px; }
.experience>div+div dt { background:var(--mint); }
.experience dd { color:var(--secondary); }
.experience dd span { display:block; margin-top:3px; font:12px/1.8 var(--mono); }
.contact { position:relative; padding:26px 24px 24px; background:var(--yellow); box-shadow:0 4px 9px #24241b24; transform:rotate(1deg); min-width:0; }
.contact::before { width:72px; left:calc(50% - 36px); transform:rotate(-5deg); }
.contact-note { display:block; font:25px/1.2 var(--hand); margin-bottom:16px; }
.contact p { font-size:14px; }
.contact-email { display:block; font-size:clamp(19px,2.1vw,27px); line-height:1.6; margin-top:14px; min-height:44px; }
.contact a:hover { color:var(--blue); }
.contact-links { display:flex; gap:12px 20px; flex-wrap:wrap; margin-top:20px; border-top:1px solid currentColor; padding-top:12px; }
.contact-links a { display:flex; align-items:center; min-height:44px; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.contact-empty { margin-top:22px; font-size:12px!important; color:var(--secondary); }
.footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 24px; border-top:1px solid var(--line); padding-block:15px; font-size:11px; color:var(--secondary); }
.footer a { display:inline-flex; align-items:center; min-height:44px; }
.footer a:hover { color:var(--blue); }
.credit { margin-left:auto; }
.fallback { padding:40px; }
@media (max-width:1100px) {
  .brand-en { display:none; }.snapshot { width:126px; }.snapshot img { height:126px; }.snapshot-right { width:136px; }.snapshot-right img { height:115px; }
  .hero-copy { max-width:560px; }.lead { max-width:480px; font-size:16px; }.about-columns { gap:40px; }
  .project-panel { gap:24px; padding:30px 28px 40px; }.cover { height:300px; }
}
@media (max-width:850px) {
  body { padding:16px; }.wrap { width:calc(100% - 56px); }.header { padding-inline:20px; gap:16px; }nav a { padding-inline:10px; }
  .snapshot { display:none; }.hero-collage { min-height:0; }.intro { padding-block:42px 52px; }.nameplate { font-size:clamp(80px,16vw,148px); }
  .project-tab-prefix { display:none; }.about-columns { gap:28px; }
}
@media (max-width:640px) {
  body { padding:10px; background-size:40px 40px; }.wrap { width:calc(100% - 36px); }.header { padding:8px 12px; min-height:60px; gap:10px; flex-wrap:wrap; }
  .brand { font-size:13px; gap:5px; }.stamp { width:22px; height:22px; font-size:19px; }nav { margin-left:auto; margin-right:0; gap:1px; }nav a { padding:6px 8px; font-size:11px; }.header-email { display:none; }
  .intro { padding-block:36px 44px; }.eyebrow { font-size:12px; }.eyebrow span { font-size:15px; }
  .nameplate { padding:8px 12px 12px; font-size:clamp(66px,24vw,132px); }.hero-labels { gap:9px; }.hero-labels span { padding:4px 9px; font-size:10px; }
  .lead { font-size:14px; line-height:1.9; }.browse { margin-top:18px; font-size:11px; }
  .handwritten { font-size:14px; }.pixel { font-size:clamp(34px,9.5vw,61px); }.section-heading { gap:12px; }.section-heading h2 { gap:9px; }.section-label { font-size:12px; }.work-count { display:none; }
  .project-panel { grid-template-columns:minmax(0,1fr); min-height:0; gap:20px; padding:24px 22px 28px; }.project-copy h3 { margin-top:12px; font-size:27px; }.project-summary { margin-top:12px; font-size:14px; line-height:1.8; }
  .project-tags { margin-top:14px; }.project-open,.concept { margin-top:16px; }.cover { height:auto; aspect-ratio:1.35; }.work { padding-bottom:40px; --sticky-top:16px; }
  .about { padding-block:8px 40px; }.about .section-heading { padding-top:28px; margin-bottom:28px; }.about-columns { grid-template-columns:minmax(0,1fr); gap:36px; }.about-text { padding:18px; font-size:14px; }.contact { padding:25px 22px; }.footer { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition:none!important; animation:none!important; }.folder:hover .cover { transform:none; } }
@media print { body { padding:0; background:white; }.notebook-sheet { border:0; box-shadow:none; }.wrap { width:100%; }.snapshot,.browse,nav,.header-email { display:none; }.stacked .stack { display:block; }.stacked .stack-item { position:static; margin:0 0 24px; break-inside:avoid; }.stacked .project-tab { left:0; width:170px; }.project-panel,.contact { print-color-adjust:exact; -webkit-print-color-adjust:exact; }.cover { height:220px; }.nameplate,.about-text,.contact { transform:none; } }