.bento-wrap{padding:var(--screen-pad-top) var(--screen-pad-x) clamp(14px, 2vw, 22px);display:flex}.bento{--card-h:calc((100% - var(--tap) - var(--col-rows,3) * var(--gap)) / var(--col-rows,3));gap:var(--gap);grid-template-columns:1.16fr .9fr 1.02fr .8fr;grid-template-rows:var(--tap) calc((var(--col-rows,3) - 1) * var(--card-h) + (var(--col-rows,3) - 2) * var(--gap)) var(--card-h);flex:1;grid-template-areas:". .works links""hero hero works links""stack stack works links";min-height:0;display:grid}.bento>*,.bento-col>*{min-width:0}.tile{flex-direction:column;min-height:0;padding:clamp(14px,1.5vw,24px);animation:.45s both rise;display:flex;overflow:hidden}a.tile{min-height:var(--tap);transition:box-shadow .18s,transform .18s}a.tile:hover{box-shadow:var(--md-elevation-2);transform:translateY(-2px)}.tile-label{flex:none;margin-bottom:10px}.bento-col{grid-template-rows:var(--tap) repeat(var(--col-rows,3), minmax(0, 1fr));gap:var(--gap);min-width:0;min-height:0;display:grid}.bento-col--works{grid-area:works}.bento-col--links{grid-area:links}.col-head{min-height:var(--tap);flex:none;justify-content:space-between;align-items:center;gap:10px;padding-left:4px;display:flex}.col-head .tile-label{margin-bottom:0}.tile--hero{background:var(--md-surface-container-low);grid-area:hero;justify-content:center;padding:clamp(18px,2.4vw,40px)}.tile-grain{pointer-events:none;border-radius:inherit;background-image:repeating-linear-gradient(135deg,#89511f0d 0 1px,#0000 1px 12px);position:absolute;inset:0;-webkit-mask-image:radial-gradient(90% 80% at 100% 100%,#000,#0000 70%);mask-image:radial-gradient(90% 80% at 100% 100%,#000,#0000 70%)}.tile--hero>*{position:relative}.hero-role{font-size:var(--md-title-medium-size);line-height:var(--md-title-medium-lh);letter-spacing:var(--md-title-medium-track);font-weight:var(--md-weight-medium);color:var(--md-primary);flex:none;margin:0 0 10px}.tile--empty{grid-row:span var(--col-rows,3);font-size:var(--md-body-medium-size);line-height:var(--md-body-lh-ja);letter-spacing:var(--md-body-medium-track);color:var(--md-on-surface-variant);justify-content:center;align-items:flex-start;padding:clamp(16px,1.6vw,24px)}.tile--empty a{color:var(--md-primary)}.hero-title{font-family:var(--md-typeface-brand);font-size:clamp(var(--md-headline-medium-size), 3.4vw, var(--md-display-medium-size));letter-spacing:var(--md-display-medium-track);line-height:1.22;font-weight:var(--md-weight-medium);color:var(--md-on-surface);text-wrap:balance;flex:none;margin:0 0 clamp(10px,1.2vw,18px)}.hero-title .accent{color:var(--md-primary)}.hero-lead{min-height:0;font-size:var(--md-body-large-size);line-height:var(--md-body-lh-ja);letter-spacing:var(--md-body-large-track);color:var(--md-on-surface-variant);white-space:pre-line;scrollbar-width:thin;scrollbar-color:var(--md-outline) transparent;flex:0 auto;max-width:30em;margin:0;overflow-y:auto}.hero-lead::-webkit-scrollbar{width:6px}.hero-lead::-webkit-scrollbar-thumb{background:var(--md-outline);border-radius:var(--md-corner-full)}.hero-foot{flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,28px);margin-top:clamp(16px,2vw,28px);display:flex}.hero-cta{flex:none}.hero-cta-sub{flex:none;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.hero-lead:focus-visible{outline:3px solid var(--md-secondary);outline-offset:2px;border-radius:var(--md-corner-xs)}.hero-meta{font-size:var(--md-label-large-size);line-height:var(--md-label-large-lh);letter-spacing:var(--md-label-large-track);color:var(--md-on-surface-variant);align-items:baseline;gap:10px;margin:0;display:flex}.hero-meta-key{font-weight:var(--md-weight-medium);letter-spacing:.06em;text-transform:uppercase}.hero-meta-val{font-family:var(--md-typeface-mono)}.tile--stack{padding:clamp(14px,1.3vw,20px)}.tile--stack:after{content:"";background:linear-gradient(transparent, var(--md-surface-container-low) 78%);border-radius:0 0 var(--md-corner-md) var(--md-corner-md);pointer-events:none;height:34px;position:absolute;bottom:0;left:0;right:0}.tile--stack{grid-area:stack}.stack-scroll{scrollbar-width:thin;scrollbar-color:var(--md-outline) transparent;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-content:start;gap:14px 24px;min-height:0;padding:0 2px 20px 0;display:grid;overflow-y:auto}.stack-scroll::-webkit-scrollbar{width:6px}.stack-scroll::-webkit-scrollbar-thumb{background:var(--md-outline);border-radius:var(--md-corner-full)}.stack-cat{font-size:var(--md-title-small-size);line-height:var(--md-title-small-lh);letter-spacing:.06em;font-weight:var(--md-weight-medium);text-transform:uppercase;margin:0 0 8px}.stack-chips{flex-wrap:wrap;gap:6px;margin:0;display:flex}.tile--stack .md-chip{padding:0 10px}.chip-usage{color:var(--md-on-surface-variant);font-size:var(--md-label-medium-size)}.tile--work{justify-content:center;gap:8px;padding:clamp(12px,1.2vw,18px) clamp(14px,1.4vw,20px)}.work-head{font-size:var(--md-label-medium-size);line-height:var(--md-label-medium-lh);letter-spacing:var(--md-label-medium-track);color:var(--md-on-surface-variant);align-items:center;gap:10px;margin:0;display:flex}.work-index{font-family:var(--md-typeface-brand);font-weight:var(--md-weight-medium);color:var(--md-primary)}.work-source{border-radius:var(--md-corner-sm);background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:var(--md-weight-medium);padding:2px 10px}.work-period{font-family:var(--md-typeface-mono)}.work-arrow{color:var(--md-on-surface-variant);margin-left:auto;transition:transform .18s,color .18s}.tile--work:hover .work-arrow{color:var(--md-primary);transform:translate(2px,-2px)}.work-title{letter-spacing:var(--md-title-medium-track);font-size:1.125rem;line-height:1.5;font-weight:var(--md-weight-bold);word-break:auto-phrase;color:var(--md-on-surface);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.work-desc{font-size:var(--md-body-medium-size);letter-spacing:var(--md-body-medium-track);color:var(--md-on-surface-variant);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;line-height:1.6;display:-webkit-box;overflow:hidden}.work-tags{flex-wrap:wrap;gap:8px;max-height:32px;margin:0;display:flex;overflow:hidden}.tile--link{justify-content:center;gap:4px;padding:clamp(12px,1.2vw,18px) clamp(14px,1.4vw,20px)}.link-name{font-family:var(--md-typeface-brand);letter-spacing:var(--md-title-large-track);font-size:1.125rem;line-height:1.5;font-weight:var(--md-weight-medium);color:var(--md-on-surface)}.link-sub{font-family:var(--md-typeface-mono);font-size:var(--md-body-medium-size);line-height:var(--md-body-medium-lh);letter-spacing:var(--md-body-medium-track);color:var(--md-on-surface-variant);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.link-arrow{color:var(--md-on-surface-variant);transition:transform .18s,color .18s;position:absolute;top:clamp(10px,1.1vw,15px);right:clamp(12px,1.2vw,17px)}.tile--link:hover .link-arrow{color:var(--md-primary);transform:translate(2px,-2px)}.tile--link-mail{background:var(--md-primary-container)}.tile--link-mail .link-name,.tile--link-mail .link-sub,.tile--link-mail .link-arrow{color:var(--md-on-primary-container)}.tile--link-mail.md-state:after{background:var(--md-on-primary-container)}@media (min-width:1001px) and (max-width:1240px){.bento{grid-template-columns:1fr .78fr 1.16fr .84fr}.work-title{-webkit-line-clamp:3}.work-desc{-webkit-line-clamp:1}}@media (max-width:1000px){.bento{grid-template-columns:1.1fr 1fr .78fr;grid-template-rows:var(--tap) minmax(0, 1.5fr) minmax(0, .9fr);grid-template-areas:".works links""hero works links""stack works links"}.hero-title{font-size:clamp(var(--md-headline-small-size), 2.8vw, var(--md-headline-large-size))}.hero-foot{flex:none;margin-top:14px}}@media (max-height:819px){.bento{grid-template-rows:var(--tap) minmax(320px, auto) minmax(220px, auto)}.bento-wrap{padding-bottom:18px}.screen{min-height:0}.hero-lead{overflow:visible}.stack-scroll{max-height:clamp(180px,26vh,260px)}}@media (max-width:860px){.screen{min-height:0}.bento{grid-template:none/1fr}.tile--hero,.tile--stack,.bento-col--works,.bento-col--links{grid-area:auto}.tile--hero{padding:24px 20px 28px}.hero-title{font-size:clamp(var(--md-headline-small-size), 6vw, var(--md-display-small-size))}.bento-col{flex-direction:column;display:flex}.tile--link{min-height:88px}.stack-scroll{padding-bottom:0;overflow:visible}.tile--stack:after{display:none}.work-title,.work-desc{-webkit-line-clamp:3}.work-tags{max-height:none}}@media (max-width:520px){.hero-foot{flex-direction:column;align-items:flex-start;gap:14px}}@media not all and (min-width:53.75em) and (min-height:51.25em){.work-title,.work-desc{-webkit-line-clamp:none;display:block;overflow:visible}.hero-lead{overflow-y:visible}}