/* Jackhao.tv V63.2 — image-led editorial content and reading rhythm */
:root{
  --jh-content-wide:1240px;
  --jh-reading-copy:720px;
  --jh-media-radius:18px;
}

.jh-content-shell{width:min(var(--jh-content-wide),calc(100% - 48px));margin-inline:auto}
.jh-reading-copy{max-width:var(--jh-reading-copy)}
.jh-reading-copy :where(p,li),.editorial-prose :where(p,li){font-size:16px;line-height:1.92}
.jh-reading-copy p{margin:0 0 1.05em}
.jh-reading-copy h2{margin:8px 0 18px;font-size:clamp(30px,3vw,42px);line-height:1.22;letter-spacing:-.03em}
.jh-media-split{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);gap:clamp(34px,6vw,76px);align-items:center}
.jh-media-split.reverse{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr)}
.jh-media-split.reverse>.jh-media-frame{order:2}
.jh-media-frame{margin:0;overflow:hidden;border-radius:var(--jh-media-radius);background:#d8d2c9}
.jh-media-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.jh-media-frame.wide img{aspect-ratio:16/10}
.jh-media-frame figcaption{padding:11px 14px;background:var(--jh-surface,#fffdf8);color:var(--jh-muted,#70777a);font-size:12px;line-height:1.55}
.jh-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jh-visual-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--jh-line,rgba(24,33,39,.12));border-radius:var(--jh-media-radius);background:var(--jh-surface,#fffdf8);color:inherit;text-decoration:none}
.jh-visual-card>img,.work-card>.jh-card-media{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.jh-visual-card>div{display:flex;flex:1;flex-direction:column;padding:20px}
.jh-visual-card small{font-size:11px;letter-spacing:.08em;color:var(--jh-muted,#70777a)}
.jh-visual-card h3{margin:7px 0 9px;font-size:clamp(21px,2vw,27px);line-height:1.28}
.jh-visual-card p{margin:0 0 16px!important;font-size:14px!important;line-height:1.75!important}
.jh-visual-card span{margin-top:auto;color:var(--jh-gold,#b88a59);font-size:13px}
.work-card:has(>.jh-card-media){padding:0!important;overflow:hidden}
.work-card:has(>.jh-card-media)>:not(.jh-card-media){margin-left:20px;margin-right:20px}
.work-card:has(>.jh-card-media)>.tag{margin-top:20px}
.work-card:has(>.jh-card-media)>.btn{margin-bottom:20px;align-self:flex-start}
.jh-story-section{overflow:hidden}
.jh-story-section .jh-reading-copy .v35-buttons{margin-top:24px}

/* About */
.page-about .profile-layout{align-items:start}
.page-about .profile-photo{position:sticky;top:96px}
.page-about .profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--jh-media-radius)}
.page-about .jh-about-city{padding-block:78px}
.page-about .jh-about-city .jh-media-frame img{aspect-ratio:5/4}
.page-about .jh-about-gallery{padding-top:20px}
.page-about .jh-about-gallery .jh-visual-card:nth-child(2) img{object-position:center 58%}

/* Studio */
.page-studio .jh-process-card{padding:0!important;overflow:hidden}
.page-studio .jh-process-card>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.page-studio .jh-process-card>h2{margin:20px 20px 8px}
.page-studio .jh-process-card>p{margin-left:20px!important;margin-right:20px!important}
.page-studio .jh-process-card>p:last-child{margin-bottom:22px!important}
.page-studio .jh-studio-gallery{padding-block:68px}
.page-studio .jh-studio-gallery .jh-visual-card{background:transparent}
.page-studio .jh-studio-gallery .jh-visual-card>div{padding:14px 2px 0}
.page-studio .jh-studio-gallery .jh-visual-card img{aspect-ratio:4/3;border-radius:var(--jh-media-radius)}

/* Listening room */
.page-listening .v26-room-grid{gap:16px!important}
.page-listening .v26-room-card{padding:0!important;overflow:hidden;border-radius:var(--jh-media-radius)!important;background:var(--jh-surface,#fffdf8)!important}
.page-listening .v26-room-card>.jh-room-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.page-listening .v26-room-card>:not(.jh-room-image){margin-left:20px;margin-right:20px}
.page-listening .v26-room-card>span{margin-top:18px;color:var(--jh-gold,#b88a59)}
.page-listening .v26-room-card h2{margin-top:6px!important;margin-bottom:8px!important}
.page-listening .v26-room-card>p{font-size:14px!important;line-height:1.72!important}
.page-listening .v26-room-card>div{margin-bottom:20px;font-size:13.5px;line-height:1.7}
.page-listening .v26-room-card>div a{display:inline-block;min-height:38px;padding-block:8px;color:inherit;font-weight:650}
.page-listening .jh-listening-story{padding-block:76px}

/* Platforms: use an existing project listening image without sacrificing contrast. */
.page-platforms .jh-platforms-hero{position:relative;isolation:isolate;overflow:hidden;background:#0d1821!important}
.page-platforms .jh-platforms-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:url('/assets/images/generated/listening-night.webp') center/cover no-repeat;filter:saturate(.82) contrast(1.03);transform:scale(1.015)}
.page-platforms .jh-platforms-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,17,24,.94) 0%,rgba(9,23,31,.82) 48%,rgba(9,22,29,.58) 100%),linear-gradient(0deg,rgba(8,20,27,.45),rgba(8,20,27,.18))}
.page-platforms .jh-platforms-hero .jh-platform-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Keep visual content calm and readable on small screens. */
@media(max-width:900px){
  .jh-media-split,.jh-media-split.reverse{grid-template-columns:1fr;gap:28px}
  .jh-media-split.reverse>.jh-media-frame{order:0}
  .jh-visual-grid{grid-template-columns:1fr}
  .page-about .profile-photo{position:static}
}
@media(max-width:700px){
  .jh-content-shell{width:calc(100% - 40px)}
  .jh-reading-copy :where(p,li),.editorial-prose :where(p,li){font-size:16px;line-height:1.86}
  .jh-reading-copy h2{font-size:clamp(28px,7.5vw,34px)}
  .jh-media-frame,.jh-visual-card,.page-about .profile-photo img{border-radius:16px}
  .jh-media-frame figcaption{font-size:11.5px}
  .jh-visual-card>div{padding:18px}
  .page-about .jh-about-city,.page-studio .jh-studio-gallery,.page-listening .jh-listening-story{padding-block:54px}
  .page-listening .v26-room-card>:not(.jh-room-image){margin-left:18px;margin-right:18px}
  .page-listening .v26-room-card>span{margin-top:16px}
  .page-listening .v26-room-card>div{margin-bottom:18px}
}
@media(max-width:390px){
  .jh-content-shell{width:calc(100% - 36px)}
}