/* Navigation placement study; retained V3–20 scene and approved fig emphasis. */
header{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:13px;z-index:5;width:max-content;max-width:calc(100% - 44px);right:auto}
#identity-nav{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;max-width:none;flex-wrap:nowrap}
#identity-nav button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;min-height:48px;padding:2px 0 7px;letter-spacing:0;color:#59412e}
#identity-nav .question{font:italic 18px/1.25 Georgia,'Times New Roman',serif;border-bottom:1px solid #947b573e;padding-bottom:3px}

#identity-nav button:hover .question{color:#784e6a;border-color:#784e6a80}
#identity-nav button:focus-visible{outline:1px solid #785a71;outline-offset:5px;border-radius:1px}
#about-placement{width:min(560px,calc(100vw - 32px))}#about-placement h2{font-size:36px}#about-placement .note{font-size:12px;font-style:italic}
@media(max-width:760px){header{gap:13px}#identity-nav button{gap:4px;min-height:34px;padding:1px 0 5px}#identity-nav .question{font-size:17px}.intro{top:calc(151px + env(safe-area-inset-top))}}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){header{gap:10px}#identity-nav .question{font-size:16px}#identity-nav button{min-height:30px}.intro{top:calc(137px + env(safe-area-inset-top))}}
@media(max-width:980px) and (max-height:650px) and (orientation:landscape){header{gap:7px}#identity-nav{gap:0}#identity-nav .question{font-size:15px}#identity-nav button{min-height:30px}.intro{top:calc(123px + env(safe-area-inset-top))}}

/* The two questions stack on touch devices as well as desktops. */
@media(min-width:761px),(hover:hover) and (pointer:fine){
 #identity-nav{flex-direction:column;gap:0}
 #identity-nav button{min-height:34px;padding:2px 0 7px}
}