:root{--ink:#181818;--muted:#666;--line:#dedede;--paper:#fff;--accent:#193b80}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}a{color:inherit}header,footer{background:white}.topbar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97)}.top-inner,.foot-inner{max-width:1320px;margin:auto;padding:19px 34px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{text-decoration:none;display:flex;flex-direction:column;gap:3px;flex-shrink:0}.brand strong{font-size:18px;letter-spacing:.03em}.brand small{font-size:9px;letter-spacing:.15em;color:var(--muted)}nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}nav a{text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.045em}nav a:hover,.text-link:hover{text-decoration:underline}.english-link{border:1px solid #222;padding:11px 14px;white-space:nowrap}.wrap{max-width:1320px;margin:0 auto;padding:0 34px}.hero{padding:78px 0 62px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:700;color:var(--muted)}h1{font-size:clamp(47px,8vw,112px);line-height:.95;letter-spacing:-.065em;margin:20px 0 26px;font-weight:800}.hero h2{font-size:clamp(20px,2.7vw,33px);font-weight:500;margin:0 0 20px;letter-spacing:.02em}.hero p{font-size:15px;line-height:1.9;color:#555;max-width:720px;margin:0}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:29px}.button{display:inline-block;text-decoration:none;border:1px solid #222;padding:13px 18px;font-size:12px;font-weight:700}.button.primary{background:#1b1b1b;color:white}.section{padding:65px 0 80px;border-bottom:1px solid var(--line)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:30px}.section-head h2{font-size:clamp(26px,4vw,46px);margin:10px 0 0;letter-spacing:-.04em}.section-head p{font-size:13px;color:var(--muted);max-width:420px;line-height:1.7}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 18px}.project-card{min-width:0}.project-photo{display:block;aspect-ratio:1.55;background:#f3f3f3;overflow:hidden}.project-photo img{display:block;width:100%;height:100%;object-fit:cover}.project-meta{font-size:10px;color:#888;letter-spacing:.12em;margin:13px 0 7px}.project-card h3{font-size:18px;margin:0 0 5px;letter-spacing:.01em}.project-card .cn-title{font-size:13px;color:#666;margin:0 0 9px}.project-card p{font-size:12px;line-height:1.8;color:#555;margin:0 0 11px;min-height:64px}.text-link{font-size:11px;font-weight:700;text-decoration:none;border-bottom:1px solid #777;padding-bottom:3px}.about-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:65px}.about-intro h2{font-size:clamp(32px,4.3vw,55px);line-height:1.05;letter-spacing:-.04em;margin:16px 0}.about-intro p{color:#555;line-height:1.8;font-size:14px}.letter p{font-size:14px;line-height:2.05;color:#333;margin:0 0 19px}.letter strong{color:#111}.signature{padding-top:16px;font-size:13px;line-height:1.8}.signature strong{font-size:17px}.background{display:grid;grid-template-columns:1fr 1.6fr;gap:65px}.background h2{font-size:35px;line-height:1.15;letter-spacing:-.04em;margin:12px 0}.background p{font-size:14px;line-height:1.9;color:#555;margin:0 0 15px}.bottom-cta{background:#f6f6f6;padding:45px 0}.bottom-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:25px}.bottom-cta h2{font-size:26px;margin:0 0 9px}.bottom-cta p{font-size:13px;color:#666;margin:0}.foot-inner{padding-top:28px;padding-bottom:28px}.footnote{font-size:10px;color:#777}#projects,#about,#background{scroll-margin-top:95px}@media(max-width:850px){.top-inner,.foot-inner{padding:15px 20px;flex-wrap:wrap}.top-inner nav{width:100%;gap:17px}.wrap{padding:0 20px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-grid,.background{grid-template-columns:1fr;gap:20px}.hero{padding:55px 0}.section{padding:45px 0}.bottom-cta .wrap{display:block}.bottom-cta .button{margin-top:20px}}@media(max-width:520px){.project-grid{grid-template-columns:1fr}.project-card p{min-height:0}.section-head{display:block}.top-inner nav{gap:13px}.english-link{padding:8px 10px}.hero h1{font-size:48px}.foot-inner nav{gap:15px}}

/* WORK-CN: only the CN letters are red */
.cn-red{color:#c32828!important}

/* CN timeline and documentary photos: isolated from existing page styles */
.cn-timeline{padding:65px max(4.5%,calc((100% - 1280px)/2));color:#fff;background:#15191e url('assets/about-timeline.jpg') center/cover no-repeat;position:relative;isolation:isolate}
.cn-timeline:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,13,.72),rgba(4,8,13,.33),rgba(4,8,13,.65));z-index:-1}
.cn-timeline-heading span{font-size:11px;letter-spacing:.18em;color:#e9bdb5}.cn-timeline-heading h2{font-size:clamp(26px,3vw,42px);font-weight:400;margin:12px 0 0}
.cn-timeline-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;position:relative;margin-top:60px;min-height:410px}
.cn-timeline-track:before{content:"";position:absolute;left:0;right:0;top:49%;border-top:2px solid rgba(255,255,255,.8)}
.cn-timeline-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.cn-timeline-dot{position:absolute;top:calc(49% - 5px);width:11px;height:11px;border:2px solid white;border-radius:50%;background:#bb473e;z-index:1}
.cn-timeline-card{position:absolute;left:0;right:0;padding:9px 5px;text-shadow:0 1px 5px #000;background:rgba(8,12,17,.48);border-radius:3px;display:flex;flex-direction:column;gap:7px;line-height:1.4}
.cn-timeline-item.above .cn-timeline-card{bottom:55%}.cn-timeline-item.below .cn-timeline-card{top:56%}
.cn-timeline-period{font-size:11px;color:#f1b9b1}.cn-timeline-card strong{font-size:13px;font-weight:600}.cn-timeline-card small{font-size:11px;color:#e3e3e3}.cn-timeline-year{position:absolute;top:calc(49% + 15px);font-size:12px;font-weight:600}
.cn-timeline-now{position:absolute;right:0;top:calc(49% - 34px);font-size:12px;color:#fff;transform:translateX(0)}
.cn-photo-section{padding-top:65px;padding-bottom:75px}.cn-photo-section h2{font-weight:400;font-size:clamp(26px,3vw,40px)}.cn-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px}.cn-photo-grid figure{margin:0}.cn-photo-grid img{width:100%;height:310px;object-fit:cover;display:block;background:#eee}.cn-photo-grid figcaption{font-size:13px;line-height:1.7;color:#777;margin-top:12px}
@media(max-width:800px){.cn-timeline{padding:45px 5%}.cn-timeline-track{display:flex;flex-direction:column;gap:12px;min-height:0;margin-top:30px;padding-left:25px}.cn-timeline-track:before{left:5px;right:auto;top:0;bottom:0;height:auto;border-top:0;border-left:2px solid #fff}.cn-timeline-item{display:block;padding-left:10px}.cn-timeline-card,.cn-timeline-item.above .cn-timeline-card,.cn-timeline-item.below .cn-timeline-card{position:static;padding:12px;background:rgba(8,12,17,.7)}.cn-timeline-dot{left:-24px;top:25px}.cn-timeline-year{position:static;display:block;margin:5px 0 0}.cn-timeline-now{position:static;transform:none;margin:8px 0 0 10px}.cn-photo-grid{grid-template-columns:1fr}.cn-photo-grid img{height:auto;max-height:420px;object-fit:contain}}

/* Refinements: panoramic timeline and correctly proportioned documentary photographs */
@media(min-width:801px){
 .cn-timeline{padding-top:28px;padding-bottom:28px;background-size:cover;background-position:center 52%}
 .cn-timeline-heading h2{font-size:clamp(22px,2.2vw,30px);margin-top:5px}
 .cn-timeline-track{min-height:290px;margin-top:22px}
 .cn-timeline-card{gap:4px;padding:6px 5px}
 .cn-timeline-card strong{font-size:12px}
 .cn-timeline-card small{font-size:10px;line-height:1.3}
 .cn-timeline-period{font-size:10px}
 .cn-photo-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);align-items:start;gap:34px}
 .cn-photo-grid figure:first-child img{height:auto;max-height:420px;object-fit:contain;object-position:left top}
 .cn-photo-grid figure:last-child img{height:auto;max-height:470px;object-fit:contain;object-position:left top}
 .cn-photo-grid figure:last-child{max-width:360px}
}
@media(max-width:800px){.cn-photo-grid figure:last-child{max-width:380px}.cn-photo-grid figure:last-child img{width:100%;height:auto;max-height:none;object-fit:contain}}

/* Hero portrait: photograph inside a replaceable portrait frame */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.85fr);align-items:center;column-gap:clamp(30px,5vw,88px)}
.cn-hero-copy{min-width:0}
.cn-hero-portrait{margin:0;min-width:0}
.cn-hero-portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% center;background:#f2f2f2}
.cn-hero-portrait figcaption{margin-top:10px;font-size:10px;letter-spacing:.12em;color:#777}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:28px}.cn-hero-portrait{max-width:450px}.cn-hero-portrait img{aspect-ratio:4/3;object-position:65% center}}

/* Three documentary photographs: two landscape frames on left, one portrait on right. */
.cn-photo-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);grid-template-rows:auto auto;column-gap:34px;row-gap:20px;align-items:stretch}
.cn-photo-grid .cn-photo-royal{grid-column:1;grid-row:1}
.cn-photo-grid .cn-photo-mountains{grid-column:1;grid-row:2}
.cn-photo-grid .cn-photo-yamada{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;min-height:0;max-width:none!important}
.cn-photo-grid .cn-photo-royal img,.cn-photo-grid .cn-photo-mountains img{width:100%;height:190px!important;max-height:none!important;object-fit:cover;object-position:center}
.cn-photo-grid .cn-photo-yamada img{width:100%;height:0!important;min-height:0;max-height:none!important;flex:1 1 auto;object-fit:contain;object-position:center top;background:#f4f4f4}
.cn-photo-grid figcaption{min-height:44px;margin-top:10px;line-height:1.5;font-size:12px}
.cn-photo-grid .cn-photo-yamada figcaption{margin-top:10px}
@media(max-width:800px){.cn-photo-grid{grid-template-columns:1fr;grid-template-rows:auto;row-gap:24px}.cn-photo-grid .cn-photo-royal,.cn-photo-grid .cn-photo-mountains,.cn-photo-grid .cn-photo-yamada{grid-column:1;grid-row:auto}.cn-photo-grid .cn-photo-royal img,.cn-photo-grid .cn-photo-mountains img{height:auto!important;max-height:none!important;aspect-ratio:16/9;object-fit:cover}.cn-photo-grid .cn-photo-yamada{max-width:380px!important}.cn-photo-grid .cn-photo-yamada img{height:auto!important;max-height:none!important;flex:none;object-fit:contain}.cn-photo-grid figcaption{min-height:0}}

/* Correzioni puntuali foto DESIGN EXPERIENCE - 09/11/2026 */
/* Entrambe le foto orizzontali riempiono il riquadro senza zone vuote. */
.cn-photo-grid .cn-photo-royal img{display:block;width:100%;height:190px!important;object-fit:cover!important;object-position:center center!important;background:transparent!important}
/* Il volto nella foto delle montagne resta interamente visibile. */
.cn-photo-grid .cn-photo-mountains img{display:block;width:100%;height:190px!important;object-fit:cover!important;object-position:center 16%!important;background:transparent!important}
/* Il ritratto Yamada riempie l'intera colonna, senza bande grigie. */
.cn-photo-grid .cn-photo-yamada img{display:block;width:100%;height:0!important;flex:1 1 auto;object-fit:cover!important;object-position:center center!important;background:transparent!important}
@media(max-width:800px){
 .cn-photo-grid .cn-photo-royal img,.cn-photo-grid .cn-photo-mountains img{height:auto!important;aspect-ratio:16/9;object-fit:cover!important}
 .cn-photo-grid .cn-photo-yamada img{height:auto!important;max-height:none!important;object-fit:contain!important;flex:none}
}

/* Yamada: preserve the complete clay model and place full caption beneath photograph. */
@media(min-width:801px){
 .cn-photo-grid .cn-photo-yamada{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
 .cn-photo-grid .cn-photo-yamada img{height:auto!important;flex:0 0 auto!important;max-height:480px!important;object-fit:contain!important;object-position:center bottom!important;background:#fff!important}
 .cn-photo-grid .cn-photo-yamada figcaption{position:static!important;display:block!important;margin-top:10px!important;min-height:0!important;line-height:1.65!important;overflow:visible!important}
}
@media(max-width:800px){
 .cn-photo-grid .cn-photo-yamada img{height:auto!important;max-height:none!important;object-fit:contain!important;background:#fff!important}
 .cn-photo-grid .cn-photo-yamada figcaption{position:static!important;overflow:visible!important}
}