/* V6: NINE INDEPENDENT PAGES. Never place the design contact sheet on HOME.
   Visual reference is a collection of FIRST SCREENS, not one 3x3 page.
   The full blueprint's rich sections follow each page hero, and remain CMS-driven. */
:root{--v6-warm:#f7f7f6;--v6-paper:#f9fafb;--v6-silver:#e6e9ed;--v6-ink:#121416;--v6-transition:cubic-bezier(.22,1,.36,1)}
body{background:#e6e8eb}
.site-header{position:absolute;top:0;left:0;right:0;min-height:78px;background:transparent;border:0;box-shadow:none;padding-inline:clamp(34px,4.2vw,80px);z-index:90}
.site-header .logo{font-weight:750;letter-spacing:-.075em}
.site-header .nav-link{font-size:11px}
.screen-shell{margin:12px 12px 0;border-radius:17px;min-height:calc(100svh - 12px);background:radial-gradient(ellipse at 23% 11%,#fbfbfb 0%,#f5f5f5 55%,#e8e9ec 100%);border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 35px rgba(37,46,57,.06)}
.screen-inner{min-height:calc(100svh - 12px)}
.screen-footer{left:clamp(34px,4.2vw,80px);right:clamp(34px,4.2vw,80px)}
.v6-home-screen{position:relative;isolation:isolate}
.v6-home-screen .screen-inner{display:flex;align-items:center;padding-top:105px;padding-bottom:95px}
.v6-home-screen .home-copy{max-width:820px;width:61%;margin-top:-2vh;position:relative;z-index:4}
.v6-kicker{display:block;font-size:10px;letter-spacing:.17em;color:#65717a;font-weight:650;margin-bottom:23px}
.v6-home-screen .home-copy h1{font-size:clamp(40px,4.6vw,85px);line-height:1.16;font-weight:540;letter-spacing:-.072em;max-width:780px;text-wrap:balance}
.v6-home-screen .home-cn{font-size:clamp(15px,1.23vw,19px);line-height:1.85;color:#444a50;margin:25px 0 18px;max-width:680px}
.v6-identity{font-size:12px;color:#74808a;letter-spacing:.025em;line-height:2;display:flex;flex-wrap:wrap;gap:13px}
.v6-home-actions{display:flex;align-items:center;gap:25px;margin-top:31px}
.v6-story-link{font-size:12px;display:inline-flex;gap:13px;align-items:center;border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:5px}
.v6-story-link span{transition:transform .25s}
.v6-story-link:hover span{transform:translate(3px,-2px)}
.v6-home-screen .home-photo{width:60%;right:-1%;height:104%;bottom:-5%;object-position:52% 37%;z-index:2;filter:none}
.v6-home-screen .origami{opacity:.65}
.v6-home-screen .screen-footer .pagination{color:#5f656b}
.v6-home-screen .screen-footer .scroll-note{font-size:12px}
/* Different pages have their own hero compositions, not copies of home. */
.about-screen .about-copy h1,.standard-screen .page-lead,.career-screen .page-lead,.works-screen .page-lead,.notes-screen .page-lead,.resume-screen .page-lead,.contact-screen .page-lead,.why-screen .page-lead{font-weight:520;letter-spacing:-.073em}
.page-description{color:#667079}
.why-main>img,.now-main>img,.career-photo,.contact-image,.featured-note,.mosaic-card{border-radius:12px;overflow:hidden}
.now-main img,.why-main>img,.career-photo,.contact-image{object-fit:cover;image-rendering:auto}
.content-section{background:#f5f6f6}
.content-section.alt{background:#e9ecf0}
.content-section.dark{background:#1a1d20}
.content-section h2{font-weight:520}
/* Encourage refined density and editorial rhythm; never render homepage panel collage. */
.v6-home .content-section:first-of-type{border-top:1px solid rgba(0,0,0,.06)}
.screen-shell .black-button{font-size:12px}
[data-reveal]{transition:opacity .72s var(--v6-transition),transform .72s var(--v6-transition)}
.work-card,.mosaic-card,.note-tile{transition:transform .5s var(--v6-transition),box-shadow .5s var(--v6-transition)}
.work-card:hover,.note-tile:hover{transform:translateY(-5px)}
/* Widescreen: use the full source-image detail; do not upscale thumbnail assets. */
@media(min-width:1200px){.about-copy{max-width:52%}.about-photo{object-position:55% 25%}}
@media(max-width:1100px){.v6-home-screen .home-copy{width:68%}.v6-home-screen .home-copy h1{font-size:clamp(37px,5vw,68px)}.v6-home-screen .home-photo{width:74%}}
@media(max-width:760px){
  .site-header{min-height:75px;padding:0 27px}
  .screen-shell{margin:7px 7px 0;border-radius:15px;min-height:calc(100svh - 7px)}
  .screen-inner{min-height:calc(100svh - 7px)}
  .screen-footer{left:23px;right:23px;bottom:22px}
  .v6-home-screen .screen-inner{padding:115px 26px 85px!important;display:flex;align-items:flex-start}
  .v6-home-screen .home-copy{width:100%;max-width:none;margin:0;z-index:5}
  .v6-kicker{margin:0 0 19px;font-size:9px}
  .v6-home-screen .home-copy h1{font-size:clamp(37px,8.6vw,52px);line-height:1.17;max-width:580px;text-wrap:pretty}
  .v6-home-screen .home-cn{font-size:13px;line-height:1.68;margin:20px 0 11px;max-width:330px}
  .v6-identity{font-size:10px;gap:7px;max-width:350px}
  .v6-home-actions{margin-top:18px;gap:20px}
  .v6-home-screen .home-photo{right:-14%;width:110%;height:57%;bottom:-3%;object-position:50% 35%;opacity:1;mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 68%,transparent 100%)}
  .v6-home-screen:after{background:linear-gradient(to bottom,rgba(248,248,248,.25),transparent 48%)}
  .v6-home-screen .origami{opacity:.4}
  .now-main img{height:230px;max-width:100%}
  .screen-shell:not(.home-screen) .screen-inner{padding-top:112px!important}
}
@media(max-width:390px){.v6-home-screen .home-copy h1{font-size:36px}.v6-home-screen .home-photo{height:56%;right:-23%;width:125%}}
@media(prefers-reduced-motion:reduce){[data-reveal],.work-card,.mosaic-card,.note-tile,.v6-story-link span{transition:none!important}}

/* Notes topics: full-length editorial content, not a home-screen card mosaic. */
.v6-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.v6-topic{display:flex;align-items:start;gap:20px;padding:25px;border:1px solid #d8dde2;border-radius:12px;background:#fafafa;min-width:0;transition:background .25s,transform .35s var(--v6-transition)}
.v6-topic:hover{transform:translateY(-3px);background:#fff}
.v6-topic>span:first-child{font-size:12px;color:#8b949b}
.v6-topic>span:last-child{margin-left:auto;font-size:20px}
.v6-topic h3{font-size:24px;letter-spacing:-.04em;font-weight:550;margin-bottom:8px}
.v6-topic p{font-size:13px;color:#68727b;line-height:1.7}
@media(max-width:760px){.v6-topics{grid-template-columns:1fr}.v6-topic{padding:21px}.v6-topic h3{font-size:21px}}

/* 2026-11-13 QA: mobile portrait safety framing.
   Keep the original person and facial features unchanged; adjust only framing.
   The original 125%-wide image clipped the right side of the face on 390px screens. */
@media (max-width:760px) {
  .v6-home-screen .home-photo {
    right: 0;
    bottom: -3%;
    width: 100%;
    height: 55%;
    object-position: 50% 32%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
  }
  .about-screen .about-photo {
    right: 0;
    bottom: -4%;
    width: 100%;
    height: 59%;
    object-position: 50% 28%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%), linear-gradient(to bottom, transparent 0%, #000 24%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 35%), linear-gradient(to bottom, transparent 0%, #000 24%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .about-stats {
    background: rgba(249,249,249,.78);
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 12px;
    padding: 10px 12px;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
}

/* User-selected paired portraits (2026-11-13). Identity pixels are preserved; crops only. */
.v6-home-screen .home-photo {
  object-position: 64% 16%; mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%, #000 24%),linear-gradient(to bottom,#000 55%,transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%, #000 24%),linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-composite: intersect;
}
.about-screen .about-photo {
  object-position: 61% 19%;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%, #000 26%), linear-gradient(to bottom,#000 57%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%, #000 26%), linear-gradient(to bottom,#000 57%,transparent 100%);
  mask-composite: intersect;
}
@media(max-width:760px) {
 .v6-home-screen .home-photo {object-position:60% 11%;}
 .about-screen .about-photo {object-position:60% 11%;}
}
/* Exact selected upper-row portrait strips, preserving shoulders & the user's chosen facial pixels. */
.v6-home-screen .home-photo {object-position:56% 18%;}
.about-screen .about-photo {object-position:56% 20%;}
@media(max-width:760px) { .v6-home-screen .home-photo{object-position:52% 20%;}.about-screen .about-photo{object-position:52% 18%;} }