/* Study 08 — compact editorial rhythm, corrected identities, deeper anthracite. */
:root{--dark:#252525}
body[data-header-theme=dark]{--header-bg:#252525;--header-ink:#f9f7f4}
#menu-dialog[data-theme=dark]{background:var(--dark)}
body[data-page] .home-menu{font-size:15px;font-weight:500;gap:11px}
.home-menu .menu-lines{width:28px;gap:7px}.home-menu .menu-lines i{height:1.5px}
#close-menu{font-size:22px;gap:15px;min-height:62px}#close-menu span{font-size:62px;line-height:1}
.menu-actions .social-links{gap:17px}
.menu-actions .social-links>a,.menu-actions .social-links>button{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center}
.menu-actions .social-links svg{width:31.5px;height:31.5px}
.menu-actions .woomondo-social-icon{width:42px;height:34.5px}
.menu-actions .legal-links{display:flex;align-items:center;flex-wrap:nowrap;gap:15px;max-width:none;width:max-content}
.menu-actions .legal-links a,.menu-actions .legal-links button{display:inline-flex;align-items:center;font-size:9px;line-height:1.6;letter-spacing:.08em;white-space:nowrap;padding:10px 0;margin:0;min-height:44px}
.visual-menu-card .card-brand-logo{left:50%;top:50%;transform:translate(-50%,-50%);width:65%;height:27%;object-fit:contain;object-position:center}
.visual-menu-card[data-brand=ESQUSMI] .card-brand-logo{width:61%}
.visual-menu-card[data-brand=OYDA] .card-brand-logo{width:65%}
.footer-explore .footer-social{display:flex;flex-wrap:wrap;gap:14px;width:100%;margin-top:22px;align-items:center}
.footer-explore .footer-social>a,.footer-explore .footer-social>button{display:flex;align-items:center;justify-content:center;width:40px;height:44px;padding:0}
.footer-explore .footer-social>:first-child{justify-content:flex-start}
/* The introduction varies its alignment without moving its outer content edges. */
.introduction h2{margin-left:12%;max-width:88%}
.introduction p:not(.eyebrow){max-width:620px;margin-left:0}
/* Gallery has no separate title/divider. B is a full-width dark gallery room. */
html[data-layout] .selected-work{border:0}
html[data-layout=b] .selected-work{background:var(--dark);color:var(--paper);max-width:none;width:100%;margin:0;padding:65px 5vw 70px}
html[data-layout=b] .selected-work .gallery-more .underlined{background:var(--paper);color:var(--dark);border-color:var(--paper)}
html[data-layout=b] .selected-work .gallery-more .underlined:hover{background:#fff}
/* A narrower session pair brings picture and words together; headings bridge the gap. */
html[data-layout=b] .session-heading>.eyebrow{font-size:20px}
html[data-layout=b] .session-row,html[data-layout=b] .session-row.reverse,html[data-layout=b] .session-finale{max-width:860px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
html[data-layout=b] .session-photo,html[data-layout=b] .session-finale .session-photo{width:100%;max-width:350px;justify-self:end}
html[data-layout=b] .session-row.reverse .session-photo,html[data-layout=b] .session-finale.reverse .session-photo{justify-self:start}
html[data-layout=b] .session-copy h3,html[data-layout=b] .session-finale h3{position:relative;z-index:1;background:var(--paper-section);padding:12px 18px 12px 0;margin-left:-70px;width:calc(100% + 70px);box-decoration-break:clone;font-size:clamp(29px,3vw,43px)}
html[data-layout=b] .session-row.reverse .session-copy h3,html[data-layout=b] .session-finale.reverse h3{margin-left:0;margin-right:-70px;padding:12px 0 12px 18px}
html[data-layout=b] .session-copy p{font-size:17px;line-height:1.85}
/* Four quiet story cards, not two screen-filling images. */
.story-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1000px;gap:24px;margin:0 auto}
.story-card{max-width:232px}.story-card h3{font-size:25px;line-height:1.15}
.story-image img{object-fit:cover;object-position:center;transition:opacity .7s ease,transform .7s ease}
.story-image .story-hover{height:100%;width:100%;object-fit:cover}
@media(hover:hover) and (pointer:fine){a.story-card:hover .story-hover{opacity:1;transform:scale(1.03)}}
/* Start page: typography touches the image only where it remains readable. */
.editorial-bridge-copy{position:relative;z-index:1}
.editorial-bridge h2{width:calc(100% + clamp(70px,9vw,140px));position:relative;z-index:1;text-shadow:0 1px 12px #0003}
.editorial-overlap .overlap-front{border:0}
.home-invitation .photography-quote{margin:20px auto;max-width:920px}
.photography-quote>span{display:block;font-size:clamp(58px,8vw,116px);line-height:1.04}
.photography-quote>em{display:block;white-space:pre-line;font-size:clamp(28px,3.7vw,52px);line-height:1.2;font-weight:300;margin-top:25px;letter-spacing:-.025em}
/* Workshop image is the card. The date is its only visible caption. */
.encounter-grid{gap:26px}
.encounter-grid .workshop-card{display:block;padding:0;border:0;min-height:0}
.workshop-image{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper-section)}
.workshop-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.workshop-placeholder .workshop-image{display:grid;place-items:center;border:1px solid var(--line);color:#777}
.workshop-image>span{font-size:12px;letter-spacing:.04em}
.encounter-grid .workshop-date{margin:15px 0 0;font-size:15px;line-height:1.6;letter-spacing:.04em}
.all-workshops{margin-top:26px;font-size:15px}
@media(hover:hover) and (pointer:fine){a.workshop-card:hover img{transform:scale(1.05)}}
.workshops-page{padding:calc(var(--header-height) + 60px) 8vw 100px;min-height:70svh}
.workshops-page h1{font-size:clamp(42px,6vw,88px);font-weight:300;line-height:1.05}
body[data-page=workshops] .portrait-controls,body[data-page=workshops] .home-controls,body[data-page=workshops] .motion-control,body[data-page=workshops] #motion-note{display:none}
@media(max-width:1100px){.menu-actions .legal-links{flex-wrap:wrap;width:100%;gap:0 14px}}
@media(max-width:900px){
 .story-grid{grid-template-columns:repeat(2,minmax(0,232px));justify-content:center;gap:30px 22px}
 html[data-layout=b] .session-row,html[data-layout=b] .session-finale{gap:28px}
 html[data-layout=b] .session-copy h3,html[data-layout=b] .session-finale h3{margin-left:-50px;width:calc(100% + 50px)}
 html[data-layout=b] .session-row.reverse .session-copy h3,html[data-layout=b] .session-finale.reverse h3{margin-left:0;margin-right:-50px}
 .menu-actions .legal-links{gap:0 18px}
}
@media(max-width:600px){
 #close-menu{font-size:20px;gap:10px}#close-menu span{font-size:60px}
 .menu-top{gap:16px}.menu-top img{width:145px}
 .introduction h2{margin-left:5%;max-width:95%}
 html[data-layout=b] .selected-work{padding:35px 16px 45px}
 html[data-layout=b] .session-heading>.eyebrow{font-size:18px}
 html[data-layout=b] .session-row,html[data-layout=b] .session-row.reverse,html[data-layout=b] .session-finale{display:flex;gap:25px;max-width:440px}
 html[data-layout=b] .session-photo,html[data-layout=b] .session-finale .session-photo{width:80%;max-width:300px;margin:0;align-self:center}
 html[data-layout=b] .session-copy h3,html[data-layout=b] .session-finale h3,html[data-layout=b] .session-row.reverse .session-copy h3,html[data-layout=b] .session-finale.reverse h3{width:100%;margin:0 0 20px;padding:0;background:transparent;font-size:32px}
 .story-grid{gap:24px 16px}.story-card h3{font-size:23px}.story-placeholder .story-image span{font-size:10px;text-align:center;padding:10px}
 .editorial-bridge h2{width:100%;text-shadow:none}
 .photography-quote>span{font-size:clamp(47px,12vw,70px)}.photography-quote>em{font-size:clamp(26px,6.5vw,36px);margin-top:22px}
 .encounter-grid{grid-template-columns:1fr;gap:32px}
 .workshops-page{padding:calc(var(--header-height) + 40px) 26px 65px}
}
@media(prefers-reduced-motion:reduce){.story-image img,.workshop-image img{transition:none}a.story-card:hover .story-hover,a.workshop-card:hover img{transform:none}}

#menu-dialog[data-theme=dark]::backdrop{background:var(--dark)}