/* Media modules generated by Sina CMS. */
[hidden]{display:none!important}
.lr-album{padding:clamp(28px,5vw,64px) 0;border-top:1px solid rgba(20,20,20,.16)}
.lr-album__title{margin:0 0 24px;font:400 clamp(22px,3vw,40px)/1.05 Archivo,Arial,sans-serif;letter-spacing:-.03em}
.photo-gallery-wrap{width:min(1080px,calc(100% - clamp(24px,6vw,96px)));margin-inline:auto}
.lr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.5vw,18px)}
.lr-item{margin:0;background:#e6e3de;overflow:hidden;min-height:0;aspect-ratio:4/5}
.lr-item--wide{grid-column:span 2;aspect-ratio:16/9}.lr-item--standard{aspect-ratio:1/1}.lr-item--portrait{aspect-ratio:3/4}.lr-item--square{aspect-ratio:1/1}
.lr-item img{display:block;width:100%;height:100%;object-fit:cover}
.lr-more{display:block;margin:32px auto 0;border:1px solid rgba(20,20,20,.45);background:transparent;padding:11px 26px;font:500 11px/1 Archivo,Arial,sans-serif;letter-spacing:.16em;cursor:pointer}
.lr-more:hover{background:#151515;color:#f3f1ed}
.lr-empty{min-height:1px;border-top:1px solid rgba(20,20,20,.16)}

.video-library{border-top:1px solid rgba(20,20,20,.16);padding:clamp(34px,5vw,70px) 0;display:grid;gap:clamp(54px,9vw,120px)}
.video-card{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.video-card__media{background:#111;aspect-ratio:16/9;overflow:hidden;position:relative}
.video-card__media iframe,.video-card__media video{width:100%;height:100%;border:0;display:block;object-fit:cover}
.video-card__copy{max-width:620px}.video-card__copy h2{font:400 clamp(24px,3.5vw,46px)/1.04 Archivo,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.video-card__copy p{font:300 clamp(14px,1.4vw,18px)/1.5 Roboto,Arial,sans-serif;color:#5f5c58;margin:12px 0 0;max-width:48ch}
.video-card__featured{display:inline-block;margin:0 0 12px;font:500 10px/1 Archivo,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(20,20,20,.35);padding:6px 8px}
.cms-video-placeholder,.cms-video-external{display:grid;place-items:center;width:100%;height:100%;min-height:240px;color:#f3f1ed;text-decoration:none;font:400 12px Archivo,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.video-empty{padding:50px 0;border-top:1px solid rgba(20,20,20,.16);color:#6d6b67}
@media(min-width:900px){
  .lr-grid--cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lr-grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lr-grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lr-grid--cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lr-grid--cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lr-grid--cols-1 .lr-item--wide{grid-column:span 1}.lr-grid:not(.lr-grid--cols-1) .lr-item--wide{grid-column:span 2}
  .video-card--portrait{grid-template-columns:minmax(280px,.82fr) minmax(260px,.58fr);gap:clamp(42px,7vw,100px)}
  .video-card--portrait .video-card__media{aspect-ratio:9/16;max-height:78vh;justify-self:start;width:min(100%,520px)}
  .video-card--portrait-right .video-card__media{order:2;justify-self:end}.video-card--portrait-right .video-card__copy{order:1;justify-self:end}
  .video-card--landscape,.video-card--auto{grid-template-columns:minmax(0,1fr)}
  .video-card--landscape .video-card__copy,.video-card--auto .video-card__copy{margin-top:-4px}
}
@media(max-width:899px){
  .video-card--portrait .video-card__media{aspect-ratio:9/16;max-height:76vh;width:min(82vw,460px)}
  .video-card__media{order:1}.video-card__copy{order:2!important;justify-self:start!important}
}
@media(max-width:560px){.lr-grid{gap:6px}.lr-album{padding:28px 0}.lr-more{margin-top:24px}}

/* Portfolio v4 — tighter home sections + inline work video ---------------- */
#about,#systems,#languages,#contact,#ja-about,#ja-systems,#ja-languages,#ja-contact{display:block}
#works>.gap-block-gap,#ja-works>.gap-block-gap{display:block}
#about>.section-index,#systems>.section-index,#languages>.section-index,#contact>.section-index,
#ja-about>.section-index,#ja-systems>.section-index,#ja-languages>.section-index,#ja-contact>.section-index,
#works .section-index,#ja-works .section-index{width:100%;margin:0 0 clamp(18px,2.2vw,28px)}
#about>div:not(.section-index),#systems>div:not(.section-index),#languages>div:not(.section-index),#contact>div:not(.section-index),
#ja-about>div:not(.section-index),#ja-systems>div:not(.section-index),#ja-languages>div:not(.section-index),#ja-contact>div:not(.section-index),
#works>.gap-block-gap>div:not(.section-index),#ja-works>.gap-block-gap>div:not(.section-index){margin-left:0}

.work-row-toggle{appearance:none;-webkit-appearance:none;width:100%;margin:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;border-left:0;border-right:0;border-radius:0}
.work-row-toggle:hover,.work-row-toggle[aria-expanded="true"]{background:rgba(18,18,18,.035)}
.work-row-toggle:focus-visible{outline:1px solid rgba(18,18,18,.65);outline-offset:2px;position:relative;z-index:2}
.work-row-static{width:100%}
.work-video-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s ease;border-bottom:0 solid rgba(18,18,18,.13)}
.work-video-panel.is-open{grid-template-rows:1fr;border-bottom-width:1px}
.work-video-panel__inner{min-height:0;overflow:hidden}
.work-video-panel__content{padding:clamp(18px,2.5vw,30px) 0 clamp(30px,4vw,52px)}
.work-video-frame{width:min(100%,920px);margin:0 auto;background:#111;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center}
.work-video-panel--portrait .work-video-frame{width:min(100%,430px);aspect-ratio:9/16;max-height:78vh}
.work-video-frame iframe,.work-video-frame video{width:100%;height:100%;border:0;display:block;object-fit:cover}
.work-video-frame .cms-video-external,.work-video-frame .cms-video-placeholder{min-height:clamp(260px,42vw,520px);padding:30px;text-align:center}
.work-video-panel--portrait .work-video-frame .cms-video-external,.work-video-panel--portrait .work-video-frame .cms-video-placeholder{min-height:520px}
.work-video-external{display:flex;min-height:280px;align-items:center;justify-content:center;padding:28px;color:#f3f1ed;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font:500 11px/1.4 Archivo,Arial,sans-serif}
.work-video-label{transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){.work-video-panel{transition:none}}
@media(max-width:767px){
  #about>.section-index,#systems>.section-index,#languages>.section-index,#contact>.section-index,
  #ja-about>.section-index,#ja-systems>.section-index,#ja-languages>.section-index,#ja-contact>.section-index,
  #works .section-index,#ja-works .section-index{margin-bottom:16px}
  .work-video-panel__content{padding:14px 0 30px}.work-video-panel--portrait .work-video-frame{width:min(86vw,390px);max-height:none}
}


/* Portfolio v4.3 — centered sections + cache-safe inline works */
#about,#systems,#languages,#contact,#ja-about,#ja-systems,#ja-languages,#ja-contact,
#works,#ja-works{text-align:center}

#about>.section-index,#systems>.section-index,#languages>.section-index,#contact>.section-index,
#ja-about>.section-index,#ja-systems>.section-index,#ja-languages>.section-index,#ja-contact>.section-index,
#works .section-index,#ja-works .section-index{justify-content:center;text-align:center}

#about>div:not(.section-index),#ja-about>div:not(.section-index){max-width:820px;margin-left:auto!important;margin-right:auto!important}
#about h2,#ja-about h2{text-align:center}
#about .text-body,#ja-about .text-body{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}

#systems>div:not(.section-index),#ja-systems>div:not(.section-index),
#languages>div:not(.section-index),#ja-languages>div:not(.section-index),
#contact>div:not(.section-index),#ja-contact>div:not(.section-index){width:100%;margin-left:auto!important;margin-right:auto!important}

#systems p,#ja-systems p{margin-left:auto;margin-right:auto;text-align:center}
#systems .flex-wrap,#ja-systems .flex-wrap,#languages>div:not(.section-index),#ja-languages>div:not(.section-index){justify-content:center}

#contact .mt-contact-top,#ja-contact .mt-contact-top{justify-content:center}
#contact .mt-contact-top>div,#ja-contact .mt-contact-top>div{text-align:center}

#works>.gap-block-gap,#ja-works>.gap-block-gap{width:100%}
#works>.gap-block-gap>div:not(.section-index),#ja-works>.gap-block-gap>div:not(.section-index){width:100%;margin-left:auto!important;margin-right:auto!important}
#works [data-works]>h3,#ja-works [data-works]>h3{text-align:center}

.work-row-toggle,.work-row-static{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 96px;
  align-items:center!important;
  gap:16px!important;
  text-align:center!important;
}
.work-row-toggle>span:nth-child(1),.work-row-static>span:nth-child(1){justify-self:start;text-align:left}
.work-row-toggle>span:nth-child(2),.work-row-static>span:nth-child(2){justify-self:stretch;text-align:center}
.work-row-toggle>span:nth-child(3),.work-row-static>span:nth-child(3){justify-self:end;text-align:right}
.work-row-toggle>span:nth-child(2) .block,.work-row-static>span:nth-child(2) .block{text-align:center}

@media(max-width:767px){
  .work-row-toggle,.work-row-static{grid-template-columns:34px minmax(0,1fr) 58px;gap:8px!important}
  .work-row-toggle>span:nth-child(3),.work-row-static>span:nth-child(3){font-size:9px;letter-spacing:.14em}
  #about .text-body,#ja-about .text-body{max-width:100%}
}


/* Portfolio v4.4.0 — resilient hero, transparent portrait, denser sections */
.hero-info-layout{
  display:grid!important;
  grid-template-columns:minmax(170px,1fr) minmax(180px,var(--spacing-portrait)) minmax(170px,1fr);
  grid-template-areas:"left portrait right";
  align-items:center!important;
  gap:clamp(24px,4vw,56px)!important;
  width:min(100%,900px);
  margin-inline:auto;
}
.hero-info--left{grid-area:left;justify-self:stretch}
.hero-portrait{grid-area:portrait;justify-self:center;min-width:0}
.hero-info--right{grid-area:right;justify-self:stretch}
.profile-frame{background:transparent!important;overflow:hidden}
.profile-image{object-fit:contain!important;object-position:center!important;background:transparent!important}

/* Keep category/role/index centred, but align only the actual project title left. */
.work-row-toggle>span:nth-child(2)>span:first-child,
.work-row-static>span:nth-child(2)>span:first-child{text-align:left!important}
.work-row-toggle>span:nth-child(2)>span:not(:first-child),
.work-row-static>span:nth-child(2)>span:not(:first-child){text-align:center!important}

/* Tighter vertical rhythm for the portfolio sections. */
#about,#ja-about,#works,#ja-works{padding-top:clamp(32px,3.6vw,48px)!important;padding-bottom:clamp(32px,3.6vw,48px)!important}
#systems,#ja-systems,#languages,#ja-languages,#contact,#ja-contact{padding-top:clamp(26px,3vw,40px)!important;padding-bottom:clamp(26px,3vw,40px)!important}
#systems>.section-index,#ja-systems>.section-index{margin-bottom:clamp(12px,1.7vw,20px)!important}
#systems .mb-lede-bottom,#ja-systems .mb-lede-bottom{margin-bottom:clamp(16px,2vw,24px)!important}

/* Tablet: portrait sits above two balanced information columns instead of wrapping unpredictably. */
@media(max-width:959px){
  .hero-info-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"portrait portrait" "left right";
    width:min(100%,680px);
    gap:clamp(24px,4vw,36px)!important;
  }
  .hero-info--left,.hero-info--right{
    max-width:none!important;
    width:100%!important;
    text-align:center!important;
    align-items:stretch;
  }
  .hero-portrait{width:clamp(180px,32vw,240px)!important}
}

/* Phone: one stable column; each information side becomes a two-cell row. */
@media(max-width:560px){
  .hero-info-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"portrait" "left" "right";
    width:100%;
    gap:26px!important;
  }
  .hero-info--left,.hero-info--right{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px!important;
  }
  .hero-info--left>div,.hero-info--right>div{min-width:0}
  .hero-portrait{width:min(62vw,220px)!important}
  #about,#ja-about,#works,#ja-works{padding-top:30px!important;padding-bottom:30px!important}
  #systems,#ja-systems,#languages,#ja-languages,#contact,#ja-contact{padding-top:24px!important;padding-bottom:24px!important}
}